xm-select/docs/mds/XM14.md
2019-11-19 20:13:50 +08:00

179 lines
3.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 显示方式
### 方块形状
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 方块形状, 隐藏删除图标
:::demo
```html
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 0,
//是否显示删除图标
showIcon: false,
}
}
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 方块形状, 超过1个隐藏
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 简单拼接形式
:::demo
```html
<div id="demo4" class="xm-select-demo"></div>
<script>
var demo4 = xmSelect.render({
el: '#demo4',
model: {
label: {
type: 'text',
//使用字符串拼接的方式
text: {
//左边拼接的字符
left: '【',
//右边拼接的字符
right: '】',
//中间的分隔符
separator: '',
},
}
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
],
})
</script>
```
:::
### 自定义显示
:::demo
```html
<div id="demo5" class="xm-select-demo"></div>
<script>
var demo5 = xmSelect.render({
el: '#demo5',
model: {
label: {
type: 'xxxx', //自定义与下面的对应
xxxx: {
template(data, sels){
return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
}
},
}
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
],
})
</script>
```
:::
### 自定义显示HTML
:::demo
```html
<div id="demo6" class="xm-select-demo"></div>
<script>
var demo6 = xmSelect.render({
el: '#demo6',
model: {
label: {
type: 'xxxx', //自定义与下面的对应
xxxx: {
template(data, sels){
//也可以是html
return `<div style="color: red;">${sels.length} / ${data.length}</div>`
}
},
}
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
],
})
</script>
```
:::