uview的u-picker组件很好用，但是uniapp项目开发时每次需要写u-picker，如果只有一个还好，如果有多个的话，就需要重复写多个这样就很不方便，于是想到了二次封装，我要做的就是把选择的数据传过去，然后获取数据就可以了，显示隐藏弹窗这些操作完全可以封装成一个组件。

使用组件

<template>
	<u--form labelPosition="left" labelWidth="100" ref="form1">
		<typeSelector @getdata="gettype" :list="columns">
			<u-form-item label="卡券类型" borderBottom ref="item1">
				<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择卡券类型" disabled v-model="type"
					inputAlign="right" border="none"></u--input>
				<u-icon name="arrow-right"></u-icon>
			</u-form-item>
		</typeSelector>
	</u--form>
</template>

<script>
	import typeSelector from './typeSelector.vue'
	export default {
		components: {
			typeSelector,
		},
		data() {
			return {
				type: '',
				columns: [
					['类型一', '类型二', '类型三']
				],
			};
		},
		methods: {
			gettype(e) {
				this.type = e.value[0]
			},
		}
	};
</script>

组件源码

/**
* @Author: 858834013@qq.com
* @Name: typeSelector
* @Date: 2022-01-18
* @Desc: 类型选择器
*/
<template>
	<div>
		<div @click="show=true">
			<slot></slot>
		</div>
		<u-picker :show="show" @cancel="show=false" @confirm="getConfirm" :columns="list"></u-picker>
	</div>
</template>

<script>
	export default {
		name: 'typeSelector',
		components: {},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				show: false,
			};
		},
		methods: {
			getConfirm(e) {
				console.log(e)
				this.$emit('getdata', e)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>