uview-plus

# Select 经典下拉框

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。

# 平台差异说明

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 [] -
keyName 选中时获取列表字段 String 'ud' -
current 当前选中项目值 String Number ''

# Event

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

← Picker 选择器 →