uniapp picker封装

由于前端用的ruoyi框架，字典返回的值都是数组对象，需求量比较大，所以根据我自身情况封装了一下。

components文件夹下创建组件名称

<template>
	<view>
		<picker @change="pickerChange" :range="range" :rangeKey="rangeKey" mode="selector" :disabled="props.disabled">
			<view v-if="contentName!=undefined" class="picker_text" style="color:#000000;font-size:26rpx">
				{
  
  {contentName}}
			</view>
			<view v-else class="picker_text">{
  
  {props.placeholder}}</view>
		</picker>
	</view>
</template>

<script setup lang="ts" name="RadioPicker">
	import { nextTick, onMounted, ref, watch } from 'vue';
	const props = defineProps({
		// 索引
		value: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		},
		// 显示名称
		rangeKey: {
			type: [String, Number],
			default: () => {
				return null;
			}
		},
		// 数组数据
		range: {
			type: Object,
			default: () => {
				return null;
			}
		},
		// 值
		showName: {
			type: [String, Number],
			default: () => {
				return '';
			}
		},
		// 占位符
		placeholder: {
			type: [String, Number],
			default: () => {
				return '';
			}
		},
		// 是否禁用
		disabled: {
			type: [Boolean],
			default: () => {
				return false;
			}
		},
		/**当前双向数据绑定的值 */
		modelValue: {
			type: Object,
			default: () => {
				return null;
			}
		}
	});
	const emit = defineEmits(['update:modelValue', 'change']);
	const contentName = ref();
	const pickerChange = (e : any) => {
		if (props.showName) {
			contentName.value = props.range[e.detail.value][props.rangeKey]
			emit('update:modelValue', props.range[e.detail.value][props.showName]);
			emit('change', props.range[e.detail.value][props.showName]);
		} else {
			contentName.value = props.range[e.detail.value]
			emit('update:modelValue', props.range[e.detail.value]);
			emit('change', props.range[e.detail.value]);
		}
	}
	// 初始化
	watch(() => props.modelValue, () => {
		contentPicker()
	})
	watch(() => props.range, () => {
		contentPicker()
	})
	const contentPicker = () => {
		if (props.range && (props.modelValue || props.modelValue==0 || props.modelValue=='0')) {
			if (props.showName) {
				props.range.forEach((item : any) => {
					if (item[props.showName] == props.modelValue) {
						contentName.value = item[props.rangeKey]
					}
				})
			} else {
				props.range.forEach((item : any) => {
					if (item == props.modelValue) {
						contentName.value = item
					}
				})
			}
		}
	}
</script>

<style>
	.picker_text {
		color: #999;
		font-size: 24rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
	}
</style>

数组对象页面调用

<radioPicker v-model="roomid" showName="id" :range="hyglRoomList" :disabled="true" rangeKey="name" placeholder="请选择会议地点">
</radioPicker>

数组页面调用

<radioPicker v-model="hydj" :range="hydjvalue" placeholder="请选择会议等级">
						</radioPicker>

radioPicker 属性

v-model	绑定值
range	数组/数组对象
showName	值 (value)
rangeKey	显示值(key)
placeholder	占位符