signuptool-ui-xcx/components/item-drop/item-drop.vue

<template>
	<view style="display: flex;flex-direction: column;box-sizing: border-box;">

		<view v-if="border == 1 || border ==3" class="border"></view>

		<view style="width: 100%;height: 30rpx;"></view>
		<view style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;margin-right: 15rpx;">
			<text style="font-size: 26rpx;color: #101010;" :class="{ 'enabled': !enabled }">{{title}}</text>
			<image v-if="required" src="../../static/asterisk.png"
				style="width: 14rpx;height: 16rpx;margin-left: 12rpx;flex-shrink: 0;"></image>
		</view>
		<view style="width: 100%;height: 30rpx;"></view>
		<view style="margin-left: 16rpx;margin-right: 15rpx;" :class="{ 'enabled': !enabled }">

			<!--自定义类型的选择器-->
			<!--自定义数据 需提供数据源 以及 取值key-->
			<picker v-if="type==0" :disabled="!enabled" :range-key="dataDetailKey" :range="data" @change="custom">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
					<view v-if="select == undefined || select == null || select === ''"
						style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
					<view v-if="select != undefined && select != null || select != ''"
						style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
					<view style="flex: 1;"></view>
					<image src="../../static/drop.png"
						style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
					</image>
				</view>
			</picker>

			<!--内置选择器 支持 男女 以及 是否-->
			<picker v-if="type==1||type==2" :disabled="!enabled" range-key="detail" :range="type==1?sex:yes"
				@change="preset">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
					<view v-if="select == undefined || select == null || select === ''"
						style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
					<view v-if="select != undefined && select != null || select != ''"
						style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
					<view style="flex: 1;"></view>
					<image src="../../static/drop.png"
						style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
					</image>
				</view>
			</picker>

			<!--用户自行实现 选择的方式-->
			<view v-if="type!=0&&type!=1&&type!=2"
				style="display: flex;flex-direction: row;align-items: center;width: 100%;" @click="impl">
				<view v-if="select == undefined || select == null || select === ''"
					style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
				<view v-if="select != undefined && select != null || select != ''"
					style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
				<view style="flex: 1;"></view>
				<image src="../../static/drop.png"
					style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
				</image>
			</view>

		</view>
		<view style="width: 100%;height: 25rpx;"></view>

		<view v-if="border == 2 || border ==3" class="border"></view>
	</view>
</template>

<script>
	export default {
		name: "item-drop",
		props: {
			// 是否必填，即是否显示星号
			required: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: ""
			},
			// 提示信息
			hint: {
				type: String,
				default: ""
			},
			// 显示的内容
			content: {
				type: String,
				default: ""
			},
			// 分割线
			// 0 无上线分割线
			// 1 只有上分割线
			// 2 只有下分割线
			// 3 上下都有分割线
			border: {
				type: Number,
				default: 2
			},
			// 是否可使用
			enabled: {
				type: Boolean,
				default: true
			},
			// 下拉类型
			// 0自定义数据
			// 1男女
			// 2是否
			// 3自己实现
			type: {
				type: Number,
				default: 0
			},
			// 弹出数据
			data: {
				type: Array,
				default: []
			},
			// 弹出数据选择取值key
			dataDetailKey: {
				type: String,
				default: ""
			}
		},
		mounted() {
			this.select = this.content
		},
		data() {
			return {
				sex: [{
						"detail": "男",
						"value": "0001"
					},
					{
						"detail": "女",
						"value": "0002"
					}
				],
				yes: [{
						"detail": "是",
						"value": "0001"
					},
					{
						"detail": "否",
						"value": "0002"
					}
				],
				select: "",
				selector: {}
			};
		},
		methods: {
			custom(e) {
				let index = e.detail.value
				// 选中的
				this.selector = this.data[index]
				// 选择的值
				this.select = this.selector[this.dataDetailKey]
				console.log("选择+")
				console.log(this.selector)
			},
			preset(e) {
				let index = e.detail.value
				// 选中的
				this.selector = this.type == 1 ? this.sex[index] : this.yes[index]
				// 选择的值
				console.log("选择+")
				console.log(this.selector)
			},
			impl() {
				if (this.enabled)
					// 对方提供监听
					this.$emit("select")
			}
		}
	}
</script>

<style lang="scss">
	.border {
		height: 1rpx;
		background-color: #DFDFDF;
	}

	.enabled {
		opacity: 0.5;
	}
</style>