[JavaScript知识库]uniapp 自定义弹框

实现：通过v-if（v-show）控制弹窗的显示与隐藏

1. 界面代码

<template>
	<view class="coupon-wrapper">
		<text class="coupon-desc" @tap="viewVouponCode">点击查看券号</text>
		<view class="coupon-voucher-code-popup" v-if="showVoucherCode">
			<view class="popup-wrapper">
				<view class="popup-content">
					<view class="popup-content-wrapper">
						{{coupon.voucherCode}}
					</view>
					<view class="popup-content-bottom-btns">
						<view class="btn-cancel" @tap="coucherCodeToast('close')">关闭</view>
						<view class="btn-splitline">
							<text class="iconfont icon-anjianfengexian" />
						</view>
						<view class="btn-copy" :class="'text-' + themeColor.name" @tap="coucherCodeToast('copy')">
							<text class="iconfont icon-fuzhi" />
							复制
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

2. js代码

<script>
export default {
	data() {
		return {
			coupon: {},
			showVoucherCode: false
		};
	},
	methods: {
		//查询完整的券号
		viewVouponCode() {
			this.showVoucherCode = true;
		},
		//查看核销码的弹窗点击事件
		coucherCodeToast(flag) {
			this.showVoucherCode = false;
			if ('copy' === flag) {
				//TODO ...
				this.$mHelper.toast('券号已复制到剪切板');
			}
		}
	}
};
</script>

3. css代码

<style lang="scss">
	.coupon-voucher-code-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
		.popup-wrapper {
			position: fixed;
			width: 550rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: $font-base;
			padding: 40rpx;
			border-radius: 20rpx;
			background-color: #fff;
			z-index: 9999;
			.popup-content-wrapper {
				padding: 20rpx;
			}
			.popup-content-bottom-btns {
				display: flex;
				justify-content: space-evenly;
				padding: 20rpx;
				.btn-cancel, .btn-copy, .icon-anjianfengexian {
					font-size: $font-lg;
				}
				.btn-cancel, .icon-anjianfengexian {
					color: $font-color-light;
				}
			}
		}
	}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖