Select 选择器

提供下拉选择功能。组件内部设计分为两个子组件，分别是选择器和选择选项。

基础用法

通过标签 <NueSelect> 声明选择器组件以及 <NueSelectOption> 声明选择选项组件，实现下拉选择功能。

选择器值 & 选择选项组件标识文字

通过 v-model 在 <NueSelect> 选择器组件上绑定响应式值，记录当前选中的 <NueSelectOption> 选择选项组件的 value 属性值。

通过选择选项组件属性 value 设置选项值；属性 label 设置标识文字。

<template>
    <nue-div align="center">
        <nue-select v-model="vm">
            <nue-select-option
                v-for="option in options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
        </nue-select>
        当前值: {{ vm || '无' }}
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const vm = ref(null);
const options = [
    { label: '选项 A', value: 'optionA' },
    { label: '选项 B', value: 'optionB' }
];
</script>

空值时的占位文字

通过属性 placeholder 设置选择器组件空值时的占位文字。

<script lang="ts" setup>
import { ref } from 'vue';

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

<template>
    <nue-select v-model="vm" placeholder="请选择一个选项">
        <nue-select-option label="选项 A" value="optionA" />
        <nue-select-option label="选项 B" value="optionB" />
    </nue-select>
</template>

禁用状态

通过属性 disabled 禁用选择器。

<template>
    <nue-div align="center">
        <nue-select v-model="vm" :disabled="disabled">
            <nue-select-option label="选项 A" value="optionA" />
            <nue-select-option label="选项 B" value="optionB" />
        </nue-select>
        <nue-switch v-model="disabled" />
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const vm = ref(null);
const disabled = ref(false);
</script>

大小

通过属性 size 设置选择器大小。属性可选值为 small 和 large 。

<template>
    <nue-div align="center">
        <nue-select v-model="vm" size="small" placeholder="请选择">
            <nue-select-option label="选项 A" value="optionA" />
            <nue-select-option label="选项 B" value="optionB" />
        </nue-select>
        <nue-select v-model="vm" size="large" placeholder="请选择">
            <nue-select-option label="选项 A" value="optionA" />
            <nue-select-option label="选项 B" value="optionB" />
        </nue-select>
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

清除

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

<template>
    <nue-select v-model="vm" placeholder="请选择" clearable>
        <nue-select-option label="选项 A" value="optionA" />
        <nue-select-option label="选项 B" value="optionB" />
    </nue-select>
</template>

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

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

选择后保持打开

默认情况下，选择器会在选择后关闭，通过属性 persistent 启用选择后保持打开状态。

<template>
    <nue-select v-model="vm" placeholder="请选择" persistent>
        <nue-select-option label="选项 A" value="optionA" />
        <nue-select-option label="选项 B" value="optionB" />
    </nue-select>
</template>

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

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

组件生命周期事件

选择器打开 & 关闭事件

通过事件 @before-open 和 @after-open 监听选择器打开前和打开后的事件；@before-close 和 @after-close 监听选择器关闭前和关闭后的事件。

<template>
    <nue-select
        v-model="vm"
        placeholder="请选择"
        @before-open="() => NueMessage.info('选择器打开前')"
        @after-open="() => NueMessage.info('选择器打开后')"
        @before-close="() => NueMessage.info('选择器关闭前')"
        @after-close="() => NueMessage.info('选择器关闭后')"
    >
        <nue-select-option label="选项 A" value="optionA" />
        <nue-select-option label="选项 B" value="optionB" />
    </nue-select>
</template>

<script setup>
import { ref } from 'vue';
import { NueMessage } from 'nue-ui';

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

选择器值变化事件

通过事件 @change 监听选择器值变化事件。

<template>
    <nue-select v-model="vm" placeholder="请选择" clearable @change="handleChange">
        <nue-select-option label="选项 A" value="optionA" />
        <nue-select-option label="选项 B" value="optionB" />
    </nue-select>
</template>

<script setup>
import { ref } from 'vue';
import { NueMessage } from 'nue-ui';

const vm = ref(null);

const handleChange = newValue => {
    if (!newValue) {
        NueMessage.info('清除了选择');
        return;
    }
    NueMessage.success(`选择了 ${newValue}`);
};
</script>

选择器选项组件

<NueSelectOption> 选择器选项组件拥有多个属性，用于设置选项值、标识文字、禁用状态等。

禁用选项组件

通过属性 disabled 禁用选择选项组件。

<script setup lang="ts">
import { ref } from 'vue';

const vm = ref('');
</script>

<template>
    <nue-select v-model="vm">
        <nue-select-option value="disabled" label="禁用选项" disabled />
    </nue-select>
</template>

图标选项

通过属性 icon 设置选择选项组件的图标。属性值为图标名称。

<script setup lang="ts">
import { ref } from 'vue';

const vm = ref('');
</script>

<template>
    <nue-select v-model="vm">
        <nue-select-option icon="theme" value="icon" label="图标选项" />
    </nue-select>
</template>

默认插槽

选择器选项组件支持通过默认插槽自定义选项内容。但选择器组件只会显示选项组件 label 属性值。

<script setup lang="ts">
import { ref } from 'vue';

const vm = ref('');
</script>

<template>
    <nue-select v-model="vm">
        <nue-select-option value="custom-content" label="自定义主体">
            <nue-div align="center" gap="0.5rem">
                <nue-avatar
                    theme="round"
                    size="1.75rem"
                    src="https://avatars.githubusercontent.com/u/67311306?v=4&size=64"
                />
                <nue-text>Nathan</nue-text>
            </nue-div>
        </nue-select-option>
    </nue-select>
</template>

追加插槽

追加插槽 #append 用于在选项组件内容后，选中标识图标前追加自定义内容。

<script setup lang="ts">
import { ref } from 'vue';

const vm = ref('');
</script>

<template>
    <nue-select v-model="vm">
        <nue-select-option value="append-slot" label="自定义追加插槽">
            <nue-div align="center" gap="0.5rem">
                <nue-avatar
                    theme="round"
                    size="1.75rem"
                    src="https://avatars.githubusercontent.com/u/67311306?v=4&size=64"
                />
                <nue-text>Nathan</nue-text>
            </nue-div>
            <template #append>
                <nue-text size="0.875rem" color="green">Online</nue-text>
            </template>
        </nue-select-option>
    </nue-select>
</template>