xm-select/docs/mds/XM09.md
2019-12-09 20:17:33 +08:00

1.2 KiB

单选

开启单选

:::demo

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

<script>
var demo1 = xmSelect.render({
	el: '#demo1', 
	radio: true,
	toolbar: {show: 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>

:::