Select 下拉选择器
基础用法
html
<j-select :options="options" v-model:select="select"> </j-select>ts
import { ref } from 'vue';
const select = ref('');
const options = ref([
{
label: '选项1',
value: 39
},
{
label: '选项2',
value: 0
},
{
label: '选项3',
value: 29
},
{
label: '选项4',
value: 74
},
{
label: '选项5',
value: 37
},
{
label: '选项6',
value: 74
},
{
label: '选项7',
value: 46
},
{
label: '选项8',
value: 40
},
{
label: '选项9',
value: 96
},
{
label: '选项10',
value: 82
}
]);多选
multiple=true 开启多选模式
html
<j-select
multiple
style="width: 500px"
:options="options"
v-model:select="select"
>
</j-select>ts
import { ref } from 'vue';
const select = ref([]);
const options = ref([
{
label: '选项1',
value: 39
},
{
label: '选项2',
value: 1
},
{
label: '选项3',
value: 29
},
{
label: '选项4',
value: 74
},
{
label: '选项5',
value: 37
},
{
label: '选项6',
value: 74
},
{
label: '选项7',
value: 46
},
{
label: '选项8',
value: 40
},
{
label: '选项9',
value: 96
},
{
label: '选项10',
value: 82
}
]);禁用 Option Item
将Options数组项的 disabled 属性设置为 true 禁用Item
html
<j-select
multiple
style="width: 500px"
:options="options"
v-model:select="select"
>
</j-select>ts
import { ref } from 'vue';
const select = ref([]);
const options = ref([
{
label: '选项1',
value: 88,
disabled: true
},
{
label: '选项2',
value: 50,
disabled: false
},
{
label: '选项3',
value: 14,
disabled: true
},
{
label: '选项4',
value: 86,
disabled: false
},
{
label: '选项5',
value: 33,
disabled: true
},
{
label: '选项6',
value: 20,
disabled: false
},
{
label: '选项7',
value: 64,
disabled: true
},
{
label: '选项8',
value: 1,
disabled: false
},
{
label: '选项9',
value: 63,
disabled: true
},
{
label: '选项10',
value: 61,
disabled: false
}
]);