Select 选择器

提供下拉选择功能。

基础用法

通过 NueSelect 以及 NueSelectOption 组件，实现下拉选择功能。

通过 v-model 绑定当前选择项的值。

<template>
    <nue-div height="128px">
        <nue-select v-model="selectVModel">
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
    </nue-div>
</template>

<script setup>
    import { ref } from 'vue';

    const selectVModel = ref(null);
</script>

禁用状态

通过 disabled 属性，可以禁用下拉选择器。

<template>
    <nue-select v-model="selectVModel" disabled>
        <nue-select-option label="Option 1" value="1" />
        <nue-select-option label="Option 2" value="2" />
    </nue-select>
</template>

<script setup>
    import { ref } from 'vue';

    const selectVModel = ref(null);
</script>

待选择时的占位文字

通过 placeholder 属性，可以设置下拉选择器的占位文字。

<template>
    <nue-div height="128px">
        <nue-select v-model="selectVModel" placeholder="请选择一个选项">
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
    </nue-div>
</template>

<script setup>
    import { ref } from 'vue';

    const selectVModel = ref(null);
</script>

设置选择器大小

通过 size 属性，可以设置下拉选择器的大小。

<template>
    <nue-div height="128px">
        <nue-select v-model="selectVModel" size="large" placeholder="请选择">
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
        <nue-select v-model="selectVModel" placeholder="请选择">
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
        <nue-select v-model="selectVModel" size="small" placeholder="请选择">
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
    </nue-div>
</template>

<script setup>
    import { ref } from 'vue';

    const selectVModel = ref(null);
</script>

可清除的选择器

通过 clearable 属性，启用选择器的清除按钮。

<template>
    <nue-div height="128px">
        <nue-select v-model="selectVModel" placeholder="请选择" clearable>
            <nue-select-option label="选项 A" value="1" />
            <nue-select-option label="选项 B" value="2" />
        </nue-select>
    </nue-div>
</template>

<script setup>
    import { ref } from 'vue';

    const selectVModel = ref(null);
</script>