选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选 v-model 的值为当前被选中的 option 的 value 属性值。

value：1

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('1')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" />
  <p>value：{{ test }}</p>
</template>

可清空单选

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('1')
const options2 = [
    { label: 'hello', value: '1' },
    { label: 'xyz', value: '2' },
    { label: 'testing', value: '3' },
    { label: 'check', value: '4', disabled: true }
]
</script>
<template>
    <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" :clearable="true" />
</template>

自定义模板

<script setup>
import { h, ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('1')
const options2 = [
    { label: 'hello', value: '1' },
    { label: 'xyz', value: '2' },
    { label: 'testing', value: '3' },
    { label: 'check', value: '4', disabled: true }
];
const customRender = (option) => {
    return h('div', { className: 'xyz' }, [h('b', option.label), h('span', option.value)]);
}
</script>
<template>
    <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" :clearable="true" :renderLabel="customRender" />
</template>

<style lang="css">
.sm-select__menu-item, .xyz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
</style>

筛选选项

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('')
const options2 = [
    { label: 'hello', value: '1' },
    { label: 'xyz', value: '2' },
    { label: 'testing', value: '3' },
    { label: 'check', value: '4', disabled: true }
]
</script>
<template>
    <Select v-model="test" placeholder="可以过滤的选择器，请输入" :options="options2" filterable />
</template>

远程搜索

value：

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('')
const options2 = [
    { label: 'hello', value: '1' },
    { label: 'xyz', value: '2' },
    { label: 'testing', value: '3' },
    { label: 'check', value: '4', disabled: true }
];
const states = [
    'A', 'B', 'C', 'D'
];
const remoteFilter = (query) => {
    return new Promise((resolve) => {
        if (query) {
            setTimeout(() => {
                const options = states.filter((item) => {
                    return item.toLowerCase().includes(query.toLowerCase());
                }).map(label => {
                    return { label, value: label }
                })
                resolve(options);
            }, 500);
        } else {
            resolve([]);
        }
    })
}
</script>
<template>
  <Select v-model="test" placeholder="搜索远程结果" filterable remote :remoteMethod="remoteFilter" />
  <p>value：{{ test }}</p>
</template>