xm-select/docs/mds/XM09.md

单选

开启单选

:::demo

<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
    el: '#demo1', 
    radio: true,
    data: [
        {name: '张三', value: 1},
        {name: '李四', value: 2},
        {name: '王五', value: 3},
    ]
})
</script>

:::

单选完关闭下拉

:::demo

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
    el: '#demo2', 
    radio: true,
    clickClose: true,
    data: [
        {name: '张三', value: 1},
        {name: '李四', value: 2},
        {name: '王五', value: 3},
    ]
})
</script>

:::

更换显示方式

:::demo

<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    radio: true,
    clickClose: true,
    model: {
        label: {
            type: 'text',
            text: {
                //左边拼接的字符
                left: '',
                //右边拼接的字符
                right: '',
                //中间的分隔符
                separator: ', ',
            },
        }
    },
    data: [
        {name: '张三', value: 1},
        {name: '李四', value: 2},
        {name: '王五', value: 3},
    ]
})
</script>

:::