更新记录

1.0.1（2024-12-06） 下载此版本

• 新增 搜索功能，支持输入关键词筛选选项

1.0.0（2024-12-05） 下载此版本

• 新增 基础选择器功能
• 新增 默认值支持
• 新增 可清除功能
• 新增 禁用选项和禁用状态
• 新增 样式定制功能，支持自定义高度、颜色等
• 新增 暗黑模式适配

平台兼容性

wht-select 选择器组件

介绍

一个简单易用的下拉选择器组件，支持丰富的样式定制。

使用方法

<template>
    <wht-select v-model="value" :options="options" placeholder="请选择" />
</template>
<script>
export default {
    data() {
        return {
            value: '',
            options: [
                { label: '选项一', value: '1' },
                { label: '选项二', value: '2' },
                { label: '选项三', value: '3' }
            ]
        }
    }
}
</script>

Props 属性说明

Events 事件说明

Options 数据结构

{
  label: string,  // 显示的文本
  value: string/number,  // 选项的值
  disabled?: boolean  // 是否禁用该选项
}

代码示例

基础用法

<template>
    <wht-select v-model="value" :options="options" placeholder="请选择" />
</template>
<script>
export default {
    data() {
        return {
            value: '',
            options: [
                { label: '选项一', value: '1' },
                { label: '选项二', value: '2' },
                { label: '选项三', value: '3' }
            ]
        }
    }
}
</script>

可搜索

<template>
    <wht-select v-model="value" :options="options" placeholder="请选择" filterable />
</template>
<script>
export default {
    data() {
        return {
            value: '',
            options: [
                { label: '选项一', value: '1' },
                { label: '选项二', value: '2' },
                { label: '选项三', value: '3' }
            ]
        }
    }
}
</script>