SingleSelect 单选

轻量的单选下拉组件。点击触发器展开选项列表，选中后通过 change 事件回调并自动收起；点击组件外部区域也会自动收起。

基础用法

请选择▾

当前选中：未选择
下拉状态：收起

查看代码

<template>
    <div style="width: 240px">
        <SingleSelect :items="items" @change="onChange" @visible-change="onVisibleChange">
            <template #default="{ visible }">
                <div class="ss-trigger">
                    <span>{{ selectedLabel || "请选择" }}</span>
                    <span class="ss-arrow" :class="{ 'ss-arrow--open': visible }">▾</span>
                </div>
            </template>
            <template #option="{ item }">
                <span>{{ item.label }}</span>
            </template>
        </SingleSelect>
        <div class="ss-tip">
            当前选中：{{ selectedLabel || "未选择" }}<br />
            下拉状态：{{ open ? "展开" : "收起" }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SingleSelect } from "@a-drowned-fish/rox-v";

interface Option {
    label: string;
    value: string | number;
}

const items: Option[] = [
    { label: "选项一", value: "1" },
    { label: "选项二", value: "2" },
    { label: "选项三", value: "3" },
    { label: "选项四", value: "4" },
];

const selectedLabel = ref("");
const open = ref(false);

function onChange(item: Option) {
    selectedLabel.value = item.label;
}
function onVisibleChange(v: boolean) {
    open.value = v;
}
</script>

<style scoped>
.ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--vp-c-divider);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.ss-arrow {
    font-size: 12px;
    color: var(--vp-c-text-2);
    transition: transform 0.2s ease;
}
.ss-arrow--open {
    transform: rotate(180deg);
}
.ss-tip {
    margin-top: 12px;
    color: var(--vp-c-text-2);
    font-size: 14px;
    line-height: 1.6;
}
</style>

Props

参数	说明	类型	默认值
items	选项数据数组	Array<any>	[]
duration	展开 / 收起过渡动画时长（ms）	number	150
animation	过渡动画类型	"fade" | "slide"	"fade"
maxHeight	选项列表容器最大高度（px），超出可滚动	number	260
bg	选项列表容器背景色	string	"#ffffff"
offsetY	选项列表纵向偏移（px）	number	10
offsetX	选项列表横向偏移（px）	number	0
optionsClass	选项列表容器自定义类名	string	""
disabled	点击无任何反应	boolean	false
itemDisabledFn	下拉选项option是否禁用的函数（点击无任何反应），返回值为 boolean	(item: any, index?: number) => boolean	undefined

事件

事件名	说明	回调参数
change	选中某一项时触发	(value: any, index: number) => void
visibleChange	展开 / 收起状态变化时触发	(visible: boolean) => void

插槽

插槽名	子作用域	说明
default	{ visible }	触发器显示内容，点击切换展开 / 收起
option	{ item, index }	自定义选项渲染，item 为对应数据项

说明

• 组件内部维护展开状态 visible（初始为收起 false），点击触发器切换，点击外部或选中选项后收起。
• 选中值不由组件托管，需通过 change 事件自行保存，组件不提供 v-model。
• 展开 / 收起状态变化会触发 visibleChange 事件；default 插槽暴露的 visible 可用于控制触发器箭头旋转等视觉反馈。
• bg / offsetX / offsetY / optionsClass 用于定制选项列表的背景色、位置偏移与额外类名。