realty/virgo.wzfrontend/wx/components/login/yModal.vue

<template>
	<view class="yModal-container" :class="show ? 'show' : ''">
		<!-- 提示 -->
		<view class="yModal">
			<view class="yModal-content">
				<view class="yModal-title">
					{{title}}
				</view>
				<slot></slot>
			</view>
			<view class="yModal-bottom">
				<view class="yModal-bottom-item">
					<button plain class="yModal-bottom-btn cancel-btn" hover-class="active" @click="cancel">
						{{cancelTxt}}
					</button>
				</view>
				<view class="yModal-bottom-item">
					<button plain class="yModal-bottom-btn confirm-btn" hover-class="active" @click="confirm">
						{{confirmTxt}}
					</button>
				</view>
			</view>
		</view>
		<view v-if="show" class="yModal-mask"></view>
	</view>

</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				required: true,
			},
			show: {
				type: Boolean,
				default: false
			},
			cancelTxt: {
				type: String,
				default: '取消'
			},
			confirmTxt: {
				type: String,
				default: '确认'
			}
		},
		methods: {
			// 取消
			cancel() {
				this.$emit('onCancel');
			},
			// 确认
			confirm() {
				this.$emit('onConfirm');
			}
		}
	}
</script>

<style lang="scss">
	.yModal-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		display: none;

		&.show {
			z-index: 900;
			display: block;
		}
	}

	.yModal {
		position: absolute;
		width: 622rpx;
		background-color: #fff;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 30rpx;
		font-size: 32rpx;
		color: #323233;
		z-index: 902;

		.yModal-content {
			padding: 40rpx 30rpx;
		}

		.yModal-title {
			text-align: center;
		}

		.yModal-bottom {
			display: flex;

			.yModal-bottom-item {
				flex: 1;

				&:last-of-type {
					.yModal-bottom-btn {
						border-left: 1px solid #EBEDF0;
						border-bottom-left-radius: 0;
					}
				}
			}

			.yModal-bottom-btn {
				border: 0;
				border-top: 1px solid #EBEDF0;
				border-top-left-radius: 0;
				border-top-right-radius: 0;

				&.active {
					opacity: 0.6;
				}
			}

			// 确认按钮
			.confirm-btn {
				color: $uni-primary;
			}
		}
	}

	.yModal-mask {
		background-color: rgba(0, 0, 0, .3);
		z-index: 901;
		width: 100%;
		height: 100%;
		position: fixed;
	}
</style>