70 lines
1.1 KiB
Markdown
70 lines
1.1 KiB
Markdown
## 下拉方向
|
|
|
|
|
|
### 自动`auto`
|
|
|
|
:::demo
|
|
```html
|
|
<div style="height: 500px">占位div, 演示效果使用, 底部空间不足时会自动向上展开</div>
|
|
|
|
<div id="demo1" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo1 = xmSelect.render({
|
|
el: '#demo1',
|
|
direction: 'auto',
|
|
data: [
|
|
{name: '水果', value: 1},
|
|
{name: '蔬菜', value: 2},
|
|
{name: '桌子', value: 3},
|
|
{name: '北京', value: 4},
|
|
]
|
|
})
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
|
|
### 打卡向上`up`
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo2" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo2 = xmSelect.render({
|
|
el: '#demo2',
|
|
direction: 'up',
|
|
data: [
|
|
{name: '水果', value: 1},
|
|
{name: '蔬菜', value: 2},
|
|
{name: '桌子', value: 3},
|
|
{name: '北京', value: 4},
|
|
]
|
|
})
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
|
|
### 打开向下`down`
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo3" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo3 = xmSelect.render({
|
|
el: '#demo3',
|
|
direction: 'down',
|
|
data: [
|
|
{name: '水果', value: 1},
|
|
{name: '蔬菜', value: 2},
|
|
{name: '桌子', value: 3},
|
|
{name: '北京', value: 4},
|
|
]
|
|
})
|
|
</script>
|
|
```
|
|
:::
|