2019-11-19 20:13:50 +08:00
|
|
|
## 尺寸
|
|
|
|
|
|
|
|
|
|
|
|
### 四种尺寸变换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:::demo `large`, `medium`, `small`, `mini`
|
|
|
|
```html
|
|
|
|
<div id="demo1" class="xm-select-size"></div>
|
|
|
|
<div id="demo2" class="xm-select-size"></div>
|
|
|
|
<div id="demo3" class="xm-select-size"></div>
|
|
|
|
<div id="demo4" class="xm-select-size"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var demo1 = xmSelect.render({
|
|
|
|
el: '#demo1',
|
|
|
|
size: 'large',
|
|
|
|
data: [
|
|
|
|
{name: 'large', value: 1, selected: true},
|
|
|
|
{name: '李四1', value: 2},
|
|
|
|
{name: '王五1', value: 3, disabled: true},
|
|
|
|
{name: '苹果2', value: 4},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
|
|
|
|
var demo2 = xmSelect.render({
|
|
|
|
el: '#demo2',
|
|
|
|
size: 'medium',
|
|
|
|
data: [
|
|
|
|
{name: 'medium', value: 1, selected: true},
|
|
|
|
{name: '李四1', value: 2},
|
|
|
|
{name: '默认尺寸', value: 3, selected: true, disabled: true},
|
|
|
|
{name: '苹果2', value: 4},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
|
|
|
|
var demo3 = xmSelect.render({
|
|
|
|
el: '#demo3',
|
|
|
|
size: 'small',
|
|
|
|
data: [
|
|
|
|
{name: 'small', value: 1, selected: true},
|
|
|
|
{name: '李四1', value: 2},
|
|
|
|
{name: '王五1', value: 3, disabled: true},
|
|
|
|
{name: '苹果2', value: 4},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
|
|
|
|
var demo4 = xmSelect.render({
|
|
|
|
el: '#demo4',
|
|
|
|
size: 'mini',
|
|
|
|
data: [
|
|
|
|
{name: 'mini', value: 1, selected: true},
|
|
|
|
{name: '李四1', value: 2},
|
|
|
|
{name: '王五1', value: 3, disabled: true},
|
|
|
|
{name: '苹果2', value: 4},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
:::
|