2021-04-28

最新推荐文章于 2024-04-18 06:58:52 发布

仰望星空u

最新推荐文章于 2024-04-18 06:58:52 发布

阅读量756

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/v_shenghuojia/article/details/116242256

版权

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

uniapp手写自定义弹窗

一、先做一个遮罩层,外层元素
二、这样我们就定义了一个当前页面的蒙层这里要要注意设置 z-index 层级高点 rgba后面的小数就是蒙层具体透明度了可自行调整接下来就是弹窗具体内容部分了
- 2.这里我们让弹窗居中屏幕正中层级要比蒙层高这些也是用CSS 就实现了这里具体样式可以自己修改
- 3 .这样完整的弹窗就出来了我们只要让他隐藏显示就可以了具体什么内容都可以写到弹窗里图片对话框文本提示什么的

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

<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;
		}
	}
},