基于uniapp 组件uniform 得自定义picker 选择器

<template>
	<view :class="{'uni-select':true,'is-border':inputBorder}" >
		<picker :disabled="disabled" :mode="mode" @change="bindChange" :value="index" :range="range"
			:range-key="rangeKey">
			<view class="uni-select-border" :class="{'disabled':disabled}">
				<text class="uni-input-text">
					<text :class="{'uni-placeholder-class':!val}">
						{
   {
    displayName || placeholder }}
					</text>
				</text>
				<uni-icons type="bottom" size="14" color="#999"></uni-icons>
			</view>
		</picker>
	</view>
</template>

<script>
	/**
	 * select 输入框  正常使用uniform 的 表单校验
	 * @description inputBorder 是否存在标签
	 * range  数据源
	 * rangeKey 展示值 键名
	 * rangeValue 选定值 键名
	 */
	function obj2strClass(obj) {
   
		let classess = '';
		for (let key in obj) {
   
			const val = obj[key];
			if (val) {
   
				classess += `${
     key} `;
			}
		}
		return classess;
	}

	function obj2strStyle(obj) {
   
		let style = '';
		for (let key in obj) {
   
			const val = obj[key];
			style += `${
     key}:${
     val};`;
		}
		return style;
	}
	export default {
   
		name: 'uni-easyinput',
		emits: ['update:modelValue'],
		model: {
   
			prop: 'modelValue',
			event: 'update:modelValue'
		},
		options: {
   
			virtualHost: true
		},
		inject: {
   
			form: {
   
				from: 'uniForm',
				default: null
			},
			formItem: {
   
				from: 'uniFormItem',
				default: null
			}
		},
		props: {
   
			name: String,
			value: [Number, String],
			modelValue: [Number, String],
			placeholder: {
   
				type: String,
				default: '请选择'
			},
			rangeKey: {
   
				type: String,
				default: "label"
			},
			rangeValue: {
   
				type: String,
				default: "value"
			},
			range:{
   
				type: Array,
				default: []
			},
			disabled: {
   
				type: Boolean,
				default: false
			},
			inputBorder: {
   
				type: Boolean,
				default: true
			}
		},
		data() {
   
			return {
   
				displayName:'',
				val:''
			};
		},
		computed: {
   
			// 是否有值
			isVal() {
   
				const val = this.val;
				// fixed by mehaotian 处理值为0的情况，字符串0不在处理范围
				if (val || val === 0) {
   
					return true;
				}
				return false;
			},
		},
		watch: {
   
			value(newVal) {
   
				this.val = newVal;
			},
			modelValue(newVal) {
   
				this.val = newVal;
			},
			focus(newVal) {
   
				this.$nextTick(() => {
   
					this.focused = this.focus;
					this.focusShow = this.focus;
				});
			}
		},
		created() {
   
			
			// TODO 处理头条vue3 computed 不监听 inject 更改的问题（formItem.errMsg）
			if (this.form && this.formItem) {
   
				this.$watch('formItem.errMsg', newVal => {
   
					this.localMsg = newVal;
				});
			}
		},
		mounted() {
   
			this.$nextTick(() => {
   
				this.init();
			});
		},
		methods: {
   
			/**
			 * 初始化变量值
			 */
			init() {
   
				if (this.value || this.value === 0) {
   
					this.val = this.value;
				} else if (this.modelValue || this.modelValue === 0 || this.modelValue === '') {
   
					this.val = this.modelValue;
				} else {
   
					this.val = null;
				}
				if(this.val) {
   
					console.log( this.range,this.val)
					this.displayName = this.range.find(item=> item[this.rangeValue] == this.val)?.[this.rangeKey]
				}
			},
			bindChange(e){
   
				const value = this.range[e.detail.value][this.rangeValue]
				this.displayName = this.range[e.detail.value][this.rangeKey]
				console.log(value,this.displayName)
				this.val = value;
				// TODO　兼容　vue3
				this.$emit('update:modelValue', value);
				if (this.form && this.formItem) {
   
					const {
    validateTrigger } = this.form;
					if(validateTrigger == 'change')this.formItem.onFieldChange();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	$uni-error: #e43d33;
	$uni-border-1: #dcdfe6 !default;

	.uni-select-border {
   
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
		height: 32px;
		width: 100%;
	}

	.uni-select {
   
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		flex: 1;
		position: relative;
		text-align: left;
		color: #333;
		font-size: 14px;
	}

	// 显示边框
	.is-border {
   
		border: 1px solid $uni-border-1;
		border-radius: 4px;
	}

	.uni-placeholder-class {
   
		color: #999;
		font-size: 12px;
		// font-weight: 200;
	}
	.disabled{
   
		background-color: #F7F6F6 !important
	}
</style>