动态模拟框 组件

<template>
	<view v-if="modalPopShow">
		<view class="mask" @touchmove.stop.prevent="moveHandle" @click="hindModalPop"></view>
		<view class="show-modal">
			<view class="modal-top">
				<view class="modal-labe"> {{title}}</view>
				<view class="modal-title"> {{content}}</view>
			</view>
			<view class="modal-bottom">
				<block v-if="type==1">
					<view class="modal-btn" @click="onclick('confirm')">
						{{confirmText}}
					</view>
				</block>

				<block v-if="type==2">
					<view class="modal-btn-box">
						<view class="btn-left" @click="onclick('cancel')" :style="'color:'+cancelColor">{{cancelText}}
						</view>
						<view class="btn-right" @click="onclick('confirm')" :style="'color:'+confirmColor">
							{{confirmText}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {

			type: Number, //类型  按钮 1 一个按钮  2 两个按钮 
			title: String, //标题
			content: String, //内容
			cancelText: String, //取消按钮的文字
			confirmText: String, //确定按钮的文字
			modalPopShow: Boolean,
			item: Object, //数据
			cancelColor: String, //取消按钮文字颜色
			confirmColor: String //确认按钮文字颜色
		},
		data() {
			return {

			}
		},
		watch: {
			type: {
				handler(item, index) {
					//监听到数据变化执行方法

				},
				deep: true // 深度监听父组件传过来对象变化
			}
		},
		created() {

		},
		methods: {
			moveHandle() {},
			// 点击隐藏
			hindModalPop() {
				this.$emit("hindModalPop", false)
			},
			onclick(title) {
				if (title == 'confirm') {
					this.$emit("clickbtn", 'confirm', this.item)
				}
				if (title == 'cancel') {
					this.$emit("clickbtn", 'cancel', this.item)
				}
				this.hindModalPop()
			},


		}
	}
</script>

<style>
	.mask {
		background: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;

	}

	.show-modal {
		background: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		border-radius: 20rpx;
		width: 584rpx;
	}

	.modal-top {
		padding: 44rpx 32rpx 36rpx 40rpx;
		text-align: center;
	}

	.modal-labe {
		font-size: 36rpx;

		font-weight: 500;
		color: #333333;
	}

	.modal-title {
		font-size: 32rpx;
		color: #333333;
		line-height: 48rpx;
		margin-top: 16rpx;
		/* text-align: left; */
	}

	.modal-bottom {
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 36rpx;
		border-top: 1rpx solid #F6F6F6;
		font-weight: 500;
	}


	.modal-btn-box {
		display: flex;
	}

	.btn-left {
		width: 318rpx;
		border-right: 1rpx solid #F6F6F6;
	}

	.btn-right {
		width: 320rpx;
	}
</style>