Select 经典下拉框

本组件用于从底部弹出一个操作菜单，类似传统Web上的select下拉框组件, 供用户选择并返回结果。

4.4.0

平台差异说明

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基本使用

点击获取所点击选项ID

select回调事件带有一个object值

<template>
	<view>
        <up-select v-model:current="cateId" label="分类"
            :options="cateList" @select="selectItem"></up-select>
	</view>
</template>

<script setup>  
import { ref, onMounted } from 'vue';  
  
// 响应式数据  
const cateId = ref('')
const cateList = ref([
    {
        id: '1',
        name: '分类1'
    },
    {
        id: '2',
        name: '分类2'
    },
    {
        id: '3',
        name: '分类4'
    },
])
  
// 方法  
const selectItem = (item) => {  
  console.log(item);  
};  
</script>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
label	选项名	String	'选项'	true
options	下拉选项列表	Array	[]	-
current	当前选中项目值v-model:current	String	Number	''
keyName	选中时获取列表字段	String	'ud'	-
labelName	文案字段显示名称	String	name	-
overlay	点击后显示蒙版	Boolean	true	false
overlayOpacity	蒙版透明度	Number	0.01	-
overlayStyle	蒙版样式	Object	{}	-
duration	动画时间ms	Number	300	-
showOptionsLabel	是否显示选中项目名称	Boolean	false	true
zIndex	渲染层级	Number	11000	-
itemColor	下拉项目颜色	String	#333333	-
iconColor	下拉箭头图标颜色	String	#333333	-
iconSize	下拉箭头图标大小	String	13px	-

Event

事件名	说明	回调参数	版本
select	点击列表项时触发	-	-

ref Methods

方法名	说明	回调参数	版本
openSelect	ref自定义控制开启下拉框	-	-
closeSelect4.4.0	ref自定义控制关闭下拉框	-	-

Slot

名称	说明
-(text)	触发区域显示文案插槽
-(icon)	右侧下拉箭头图标插槽
-(options)	自定义下拉框插槽