Vue.js 实现点击按钮弹出遮挡层和提示层（同时禁止遮挡层下方滑动）【开发记录】

93 阅读 0 评论 62 点赞

我是靠谱客的博主呆萌绿草，最近开发中收集的这篇文章主要介绍Vue.js 实现点击按钮弹出遮挡层和提示层（同时禁止遮挡层下方滑动）【开发记录】，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前阶段做页面用到了这一块，其实网上有很多现成的组件可以使用，我这个是自己手写的，就此记录一下，我这里只提供该部分实现，因为每个人的需求不同，仅供参考：

思路：点击按钮以后，显示遮挡层和弹出层，实现遮挡层下方不可以进行操作，弹出层上我这里只写了一个取消文字（这里可以根据自己需求自定义弹窗大小和内容），然后点击取消将遮挡层和弹出层取消，并取消滑动限制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<style>
			.hide{
				background-color: #000;
				filter: alpha(opacity=60);
				opacity: 0.6;
				width: 100%;
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			/* 兑换话费页面 弹出层 */
			.alert{
				width: 60vw;
				height: 120px;
				border-radius: 5px;
				position: fixed;
				top: calc(50vh - 85px);
				left: 20vw;
				background-color: #fff;
				z-index: 3;
				display: none;
				cursor: pointer;
				background-position: initial initial;
				background-repeat: initial initial;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="vue-div">
			<button @click="showAlertPage()">点击我弹出提示层</button>
			<!-- 遮挡层 -->
			<div class="hide" style="display: none;"></div>
			<!-- 隐藏层 -->
			<div class="alert" style="display: none;" @click="hideAlertPage()">取消</div>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#vue-div",
			data: "",
			methods:{
				showAlertPage:function(){		/* 显示弹出层 */
					$(".hide").css({"display":"block",height:$(document).height()});
					$(".alert").css({"display":"block"});
					this.stopScroll();
				},
				hideAlertPage:function(){		/* 关闭弹出层 */
					$(".hide").css({"display":"none"});
					$(".alert").css({"display":"none"});
					this.canScroll();
				},
				stopScroll(){						/* 滑动限制 */
					document.body.style.position='fixed';
					document.body.style.height='100%';
					document.body.style.width='100%';
					document.body.style.overflow='hidden';
				},
				canScroll(){						/* 取消滑动限制 */
					document.body.style.position='static';
					document.body.style.height='auto';
					document.body.style.width='auto';
					document.body.style.overflow='';
				}
			}
		})
	</script>	
</html>