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