vue 阻止当前页面滚动

在HTML加入以下内容<div class="stop_slide" @click="handleClone" v-if="stopSlideFlag" @touchmove.prevent @mousewheel.prevent></div>在data中定义//禁止滑动div 的FlagstopSlideFlag: false,当你需要阻止当前页面滚动就把stopSlid

海森堡丶

4757人浏览 · 2021-07-15 17:57:36

海森堡丶 · 2021-07-15 17:57:36 发布

在HTML加入以下内容

<div class="stop_slide" @click="handleClone" 
v-if="stopSlideFlag" @touchmove.prevent @mousewheel.prevent>
</div>

在data中定义

//禁止滑动div 的Flag
stopSlideFlag: false,

3.样式

.stop_slide {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	// background-color: white;
	z-index: 200;
}

当你需要阻止当前页面滚动就把stopSlideFlag设为true
其他看你的业务需求了，再进行改造

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^