2021-04-28

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、先做一个遮罩层,外层元素

<view class="popup">

</view>

.popup {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	z-index: 9998;
}

二、这样我们就定义了一个当前页面的蒙层 这里要要注意设置 z-index 层级高点 rgba后面的小数就是蒙层具体透明度了 可自行调整 接下来就是弹窗具体内容部分了

代码如下（示例）：

<view class="popup-info">

</view>

2.这里我们让 弹窗居中屏幕正中 层级要比蒙层高 这些也是用CSS 就实现了 这里具体样式可以自己修改

.popup-info{
	position: fixed;
	width: 550upx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 30upx;
	padding: 40upx;
	border-radius: 20upx;
	background-color: #fff;
	z-index: 9999;
}

3 .这样 完整的弹窗就出来了 我们只要让他隐藏显示就可以了 具体什么内容都可以写到弹窗里 图片 对话框 文本提示什么的

<button type="default" @tap="tapPopup">我是弹窗</button>
<view class="popup" v-show="show">
			<view class="popup-info">
			<view>----我是内容----</view>
				<view class="popup-btn">
					<view><button type="default" @tap="cancel">取消</button></view>
					<view><button type="default" class="affirm" @tap="affirm">确认</button></view>
			</view>
		</view>
</view>

export default {
	data() {
		return {
			show:false,
	},
	methods:{
		// 弹窗
		tapPopup() {
			this.show = true;
		},
		// 点击弹窗取消
		cancel() {
			this.show = false;
		},
		// 点击弹窗确认
		affirm() { 
			this.show = false;
		}
	}
},