lh-mobile/components/lin-popup/index.vue

<!--选择弹窗操作组件-->
<template>
	<view>
		<!--START 选择弹窗-->
		<view class="cu-modal bottom-modal" :class="isShow ? 'show' : ''" @touchmove.stop.prevent @click="clickMast">
			<view class="cu-dialog items-popup" @click.stop="">
				<view class="title bold" v-if="title">{{title}}</view>
				<view class="items">
					<view class="border-bottom" v-for="(v,i) in list" :key="i" @click="confirm(i,v)">{{v.name}}</view>
					<view style="height: 100rpx;"></view>
					<view class="cancel text-red" @click="cancel">取消</view>
				</view>
			</view>
		</view>
		<!--END 选择弹窗-->
	</view>
</template>

<script>
	/*
	<hs-picker ref="picker" @onCancel="$refs['picker'].hide()" @onConfirm="confirm" />
	this.$refs['picker'].show();
	*/
	export default {
		name: "lin-picker",
		props: {
			//标题
			title: {
				type: String,
				default: ''
			},
			// 选项数据
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			//是否点击遮罩层关闭
			maskClosable: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShow: false
			};
		},
		methods: {
			cancel() {
				this.$emit('onCancel');
				this.isShow = false;
			},
			confirm(index, item) {
				this.$emit('onConfirm', index, item);
				this.isShow = false;
			},
			show() {
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			},
			clickMast() {
				if (!this.maskClosable) return false;
				this.isShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1600;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;

		&::before {
			content: "\200B";
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		&.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}

		&.bottom-modal::before {
			vertical-align: bottom;
		}

		&.bottom-modal .cu-dialog {
			width: 100%;
			border-radius: 0;
		}

		&.bottom-modal {
			margin-bottom: -1000upx;
		}

		&.bottom-modal.show {
			margin-bottom: 0;
		}

		.cu-dialog {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			width: 80%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
		}
	}

	.items-popup {
		padding: 30rpx 0;
		border-radius: 30rpx 30rpx 0 0 !important;

		.title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.items {
			max-height: 600rpx;
			overflow: auto;
			line-height: 90rpx;
			position: relative;

			&::-webkit-scrollbar {
				display: none;
			}

			view {
				&:last-child {
					border: none;
				}

				&.cancel {
					width: 100%;
					height: 90rpx;
					background: #fff;
					text-align: center;
					position: fixed;
					bottom: 20rpx;
					left: 0;
					border-top: 10rpx solid #F5F6FA;
				}
			}
		}
	}

	.border-bottom:hover {
		background-color: #f9f9f9;
	}
</style>