基于uniapp 组件uniform 得自定义picker 选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于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>