hjt_erdao_WeChatApplet/components/ming-pop/ming-pop.vue

<template>
	<!-- 组件地址:  https://ext.dcloud.net.cn/plugin?id=2716 -->
	<!-- v-if解决center弹窗位置问题 -->
	<view :class="direction==='center'?'centers':''" v-if="direction==='center'?open:true">
		<view class="product-window"
			:style="{width:width+'%',height:height=='fit-content'?height:(open?height:'fit-content')}"
			:class="(open ? 'on' : '')+' '+direction" @touchmove.stop.prevent="">
			<!-- 兼容h5顶部导航空位 -->
			<!-- #ifndef MP -->
			<!-- <view v-if="(direction!=='below'&&direction!=='center')" style="height: 100rpx;"></view> -->
			<!-- #endif -->
			<!-- <image src="../../static/ming-pop/close.png" mode=""
				:class="(direction!=='below'&&direction!=='center')?'iconfont-h5':''" class="iconfont" @click="close"
				v-if="is_close"></image> -->
			<slot></slot>
		</view>
		<view class="mask" v-if="is_mask" @touchmove.prevent :hidden="!open" @click="close(1)"></view>
	</view>
</template>

<script>
	/*
	属性名	    类型	     默认值	必填	作用	说明
	direction	String	below	否	弹窗方向	below(下边)；up(上边)；left(左边) ；right(右边)；center(中间)
	is_close	Boolean	true	否	是否显示关闭按钮	点击即可关闭弹窗
	is_mask:	Boolean	true	否	是否显示遮罩层	点击即可关闭弹窗（maskFun值在true情况下）
	maskFun	Boolean	true	否	是否点击遮罩关闭弹窗	遮罩为显示情况下才可生效
	width	Number	100	 否	 弹窗的宽度	单位（%）。建议只在上、下方向弹窗使用100(满值)
	height	String	fit-content	否	弹窗内容的固定高度	默认是根据内容支撑高度，可进行修改成自定义高度：如height='150rpx'（支持rpx，px，%，请将单位带上）
	watchOpen	Function	-	-	监听弹窗打开事件	-
	watchClose	Function	-	-	监听弹窗关闭事件	-
	*/
	export default {
		props: {
			direction: {
				type: String,
				default: "below"
			},
			width: {
				type: Number,
				default: 100
			},
			height: {
				type: String,
				default: "fit-content"
			},
			is_close: {
				type: Boolean,
				default: true
			},
			is_mask: {
				type: Boolean,
				default: true
			},
			maskFun: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				open: false
			};
		},
		methods: {
			show() {
				this.open = true;
				this.$emit("watchOpen")
			},
			close(e) {
				if (e == 1 && !this.maskFun) return;
				this.open = false;
				this.$emit("watchClose")
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.centers {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		// height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.product-window {
		position: fixed;
		background-color: #fff;
		z-index: 77;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 50rpx 30rpx;
		overflow-y: scroll;
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		-webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.below {
		left: 0;
		bottom: 0;
		transform: translate3d(0, 100%, 0);
		-webkit-transform: translate3d(0, 100%, 0);
	}

	.up {
		top: 0;
		left: 0;
		transform: translate3d(0, -100%, 0);
		-webkit-transform: translate3d(0, -100%, 0);
	}

	.right {
		right: 0;
		top: 0;
		height: 100%;
		transform: translate3d(100vw, 0, 0);
		-webkit-transform: translate3d(100vw, 0, 0);
	}

	.left {
		left: 0;
		top: 0;
		height: 100%;
		transform: translate3d(-100vw, 0, 0);
		-webkit-transform: translate3d(-100vw, 0, 0);
	}

	.center {
		position: static;
		-webkit-position: static;
		transform: translate3d(-100vw, -100%, 0);
		-webkit-transform: translate3d(-100vw, -100%, 0);
	}

	.product-window.on {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5;
	}


	.product-window .iconfont {
		position: fixed;
		right: 30rpx;
		top: 20rpx;
		font-size: 35rpx;
		color: #8a8a8a;
		width: 50rpx;
		height: 50rpx;
	}

	//兼容h5顶部导航空位
	// #ifndef MP
	.product-window .iconfont-h5 {
		top: 100rpx;
	}

	// #endif
</style>