组件代码

/**
* @Author: 858834013@qq.com
* @Name: CustomerLevel
* @Date: 2022-04-22
* @Desc: 客户级别
*/
<template>
	<div>
		<div @click="getshow">
			<div class="userInfo1">
				<div class="userInfoName">
					<text>客户级别</text><text class="red">*</text>
				</div>
				<div class="bodys">
					<input :value="name" disabled="" type="text" placeholder="请选择"
						placeholder-style="font-size:32rpx;color: #D5D5E0;" />
					<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
						mode="widthFix"></image>
				</div>
			</div>
		</div>
		<u-picker :title="title" :show="show" @cancel="show=false" @confirm="getConfirm" :columns="list"></u-picker>
	</div>
</template>

<script>
	export default {
		name: 'CustomerLevel',
		props: {
			value: {
				type: Object | String,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				show: false,
				datalist: [{
					id: 'ParticularlyImportant',
					name: '特别重要'
				}, {
					id: 'Important',
					name: '重要'
				}, {
					id: 'Commonly',
					name: '一般'
				}, ],
				list: [
					['特别重要', '重要', '一般']
				]
			};
		},
		computed: {
			name: function() {
				var name = ''
				this.datalist.forEach((type) => {
					if (this.value == type.id) {
						name = type.name
					}
				});
				return name
			}
		},
		mounted() {},
		methods: {
			getshow() {
				this.show = true
			},
			getConfirm(e) {
				var that = this;
				that.$emit("update:value", this.datalist[e.indexs[0]].id);
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo1 {
		width: 630rpx;
		min-height: 157rpx;
		background: rgba(216, 216, 216, 0);
		box-shadow: 0px 1rpx 0px 0px #F2F2F2;
		margin: 0 auto;

		.bodys {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 32rpx;
			}
		}

		.userInfoName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding-top: 32rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			.red {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5252;
				margin-top: -15rpx;
			}

		}

		.userInfoName2 {
			text {
				color: #BABBCB;
			}

			.red {
				color: #FFD0CF;
			}
		}

		input {
			margin-top: 8rpx;
			color: #474A77;
			font-size: 32rpx;
			z-index: 1;
			position: relative;
		}

		.disabled {
			color: #C8C8D6;
		}
	}
</style>

使用

<CustomerLevel :value.sync="data.CustomerLevel"></CustomerLevel>