Select 下拉列表 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# Select 下拉列表新

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

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

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

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

<script>
export default {
    data() {
        return {
            value: '',
            options: [
                { text: '北京', value: 'beijing' },
                { text: '上海', value: 'shanghai' },
                { text: '广州', value: 'guangzhou' },
                { text: '深圳', value: 'shenzhen' }
            ]
        }
    },
    methods: {
        onChange(value) {
            console.log('选择变化:', value)
        }
    }
}
</script>
✅ Copy success!

# 带标签的选择器

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

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

<script>
export default {
    data() {
        return {
            gender: '',
            genderOptions: [
                { text: '男', value: 'male' },
                { text: '女', value: 'female' }
            ]
        }
    }
}
</script>
✅ Copy success!

# 多选模式

通过 multiple 参数开启多选模式，此时 v-model 绑定值为数组。

<template>
    <u-select 
        v-model="selectedItems" 
        :list="options" 
        multiple
        placeholder="请选择多个城市"
    ></u-select>
</template>

<script>
export default {
    data() {
        return {
            selectedItems: [],
            options: [
                { text: '北京', value: 'beijing' },
                { text: '上海', value: 'shanghai' },
                { text: '广州', value: 'guangzhou' },
                { text: '深圳', value: 'shenzhen' }
            ]
        }
    }
}
</script>
✅ Copy success!

# 不同边框样式

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

<template>
    <!-- 下边框 -->
    <u-select v-model="value2" :list="options" mode="underline"></u-select>
    
    <!-- 无边框 -->
    <u-select v-model="value3" :list="options" mode="none"></u-select>
</template>
✅ Copy success!

# 文字对齐

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

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

# 弹出位置

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

<template>
    <!-- 底部弹出（默认） -->
    <u-select v-model="value1" :list="options" placement="bottom"></u-select>
    
    <!-- 顶部弹出 -->
    <u-select v-model="value2" :list="options" placement="top"></u-select>
</template>
✅ Copy success!

# 禁用选项

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

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

<script>
export default {
    data() {
        return {
            value: '',
            options: [
                { text: '选项1', value: 'option1' },
                { text: '选项2', value: 'option2', disabled: true },
                { text: '选项3', value: 'option3' },
                { text: '选项4', value: 'option4', disabled: true }
            ]
        }
    }
}
</script>
✅ Copy success!

# 此页面源代码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
value	默认值，多选时为数组	String/Number/Array	''	-
list	本地数据，格式 [{text:'',value:'',disabled?:boolean}]	Array	[]	-
clear	是否可以清空已选项	Boolean	true	true、false
emptyText	没有数据时显示的文字	String	'暂无数据'	-
label	左侧标题	String	''	-
placeholder	输入框的提示文字	String	'请选择'	-
disabled	是否禁用	Boolean	false	true、false
multiple	是否多选模式	Boolean	false	true、false
wrap	是否允许选中文本换行显示	Boolean	false	true、false
placement	弹出位置	String	'bottom'	'top'、'bottom'
align	选择文字的位置	String	'left'	'left'、'center'、'right'
hideRight	是否隐藏右侧按钮	Boolean	false	true、false
mode	边框样式	String	'default'	'default'、'underline'、'none'
customStyle	自定义样式	Object/String	{}	-

# Events

事件名	说明	回调参数
change	选中发生变化触发	value: 选中的值
open	下拉列表开启时触发	-
close	下拉列表关闭时触发	-
clear	点击清除按钮之后触发	oldValue: 清空前的值

# Slot

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

← Barcode 条形码 Signature 签名组件 →