uview-plus

# Select 经典下拉框

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

# 平台差异说明

App（vue） 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>

<script>
export default {
	data() {
		return {
			cateId: '',
			cateList: [
                {
                    id: '1',
                    name: '分类1'
                },
                {
                    id: '2',
                    name: '分类2'
                },
                {
                    id: '3',
                    name: '分类4'
                },
            ]
		};
	},
	onLoad() {},
	methods: {
		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 动画时间ms Number 300 -
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 点击列表项时触发 - -

← Picker 选择器 →