该组件是一个基于本地数据的下拉列表，提供丰富的配置选项和事件回调，适用于各种选择场景。

基本使用

基础选择器，支持单选模式，通过 v-model 绑定选中值。

<template>
    <view>
        <un-select 
            v-model="value" 
            :list="options" 
            placeholder="请选择城市"
            @change="onChange"
        ></un-select>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const value = ref('')
const options = ref<UnSelectOption[]>([
    { text: '北京', value: 'beijing' },
    { text: '上海', value: 'shanghai' },
    { text: '广州', value: 'guangzhou' },
    { text: '深圳', value: 'shenzhen' }
])

const onChange = (value: string | number) => {
    console.log('选择变化:', value)
}
</script>

带标签的选择器

通过 label 参数可以添加左侧标题。

<template>
    <un-select 
        v-model="gender" 
        :list="genderOptions" 
        label="性别"
        placeholder="请选择性别"
    ></un-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const gender = ref('')
const genderOptions = ref<UnSelectOption[]>([
    { text: '男', value: 'male' },
    { text: '女', value: 'female' }
])
</script>

不同边框样式

通过 mode 参数可以设置不同的边框样式。

<template>
    <view class="demo">
        <un-select 
            v-model="value1" 
            :list="options" 
            border="bottom"
            placeholder="下划线模式"
        ></un-select>
        
        <un-select 
            v-model="value2" 
            :list="options" 
            border="none"
            placeholder="无边框模式"
        ></un-select>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const value1 = ref('')
const value2 = ref('')
const options = ref<UnSelectOption[]>([
    { text: '北京', value: 'beijing' },
    { text: '上海', value: 'shanghai' },
    { text: '广州', value: 'guangzhou' },
    { text: '深圳', value: 'shenzhen' }
])
</script>

文字对齐

通过 align 参数可以设置选择文字的对齐方式。

<template>
    <!-- 左对齐 -->
    <un-select v-model="value1" :list="options" align="left"></un-select>
    
    <!-- 居中对齐 -->
    <un-select v-model="value2" :list="options" align="center"></un-select>
    
    <!-- 右对齐 -->
    <un-select v-model="value3" :list="options" align="right"></un-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const value = ref('')
const options = ref<UnSelectOption[]>([
    { text: '北京', value: 'beijing' },
    { text: '上海', value: 'shanghai' },
    { text: '广州', value: 'guangzhou' },
    { text: '深圳', value: 'shenzhen' }
])
</script>

弹出位置

通过 placement 参数可以设置下拉列表的弹出位置。

<template>
    <view class="demo">
        <un-select 
            v-model="value1" 
            :list="options" 
            placement="top"
            placeholder="向上弹出"
        ></un-select>
        
        <un-select 
            v-model="value2" 
            :list="options" 
            placement="bottom"
            placeholder="向下弹出"
        ></un-select>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const value1 = ref('')
const value2 = ref('')
const options = ref<UnSelectOption[]>([
    { text: '北京', value: 'beijing' },
    { text: '上海', value: 'shanghai' },
    { text: '广州', value: 'guangzhou' },
    { text: '深圳', value: 'shenzhen' }
])
</script>

禁用选项

在数据中通过 disabled 属性可以禁用特定选项。

<template>
    <un-select 
        v-model="value" 
        :list="options" 
        placeholder="包含禁用选项"
    ></un-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnSelectOption } from '@/uni_modules/uview-unix'

const value = ref('')
const options = ref<UnSelectOption[]>([
    { text: '选项1', value: 'option1' },
    { text: '选项2', value: 'option2', disabled: true },
    { text: '选项3', value: 'option3' },
    { text: '选项4', value: 'option4', disabled: true }
])
</script>

API

Props

参数	说明	类型	默认值
modelValue	默认值	string | number	-
list	本地数据	UnSelectOption[]	[]
block	是否为块级元素	boolean	false
height	下拉列表的高度, 设置高度后超可滚动	string | number	-
clearable	是否显示清除控件	boolean	true
emptyText	没有数据时显示的文字	string	暂无数据
placeholder	输入框的提示文字	string	请选择
placeholderStyle	placeholder的样式	string | object	-
backgroundColor	背景颜色	string	#ffffff
round	圆角值	string | number	-
borderColor	边框颜色	string	#dcdfe6
disabled	是否禁用	boolean	false
disabledColor	禁用状态时的背景色	string	#f5f7fa
wrap	是否允许选中文本换行显示	boolean	false
placement	弹出位置	Enum	bottom
align	选择文字的位置	Enum	left
showArrow	是否显示右侧箭头	boolean	true
border	边框类型	Enum	surround
inputStyle	输入框样式	string | object	-

Events

事件名	说明	类型
update:modelValue	更新选中值时触发	Function
change	选中发生变化触发	Function
open	下拉列表开启时触发	Function
close	下拉列表关闭时触发	Function
clear	点击清除按钮之后触发	Function

Slots

名称	说明
default	自定义选择器的所有内容

数据类型

// 下拉选择器的选项数据类型，用于定义 `list` 属性的数据结构。
type UnSelectOption = {
    text: string                    // 选项显示文本
    value: string | number           // 选项值
    disabled?: boolean               // 是否禁用（可选）
}

示例：

const options: UnSelectOption[] = [
    { text: '北京', value: 'beijing' },
    { text: '上海', value: 'shanghai' },
    { text: '广州', value: 'guangzhou' },
    { text: '深圳', value: 'shenzhen', disabled: true }
]