Vue 有弹出层时 ,禁止页面滑动

本文介绍了一种使用JavaScript实现的网页滚动限制方法,通过监听touchmove事件并设置body的overflow属性来达到阻止或允许页面滚动的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

/***阻止滚动限制***/

stop(){
  var mo=function(e){passive: false ;};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滚动限制***/
move(){
  var mo=function(e){passive: false };
  document.body.style.overflow='';//出现滚动条
  document.removeEventListener("touchmove",mo,false);
},

转载于:https://www.cnblogs.com/carrie5/p/10370480.html

### 实现 Vue3 中间弹出的 `uni-popup` 组件 在 Vue3 项目中集成并使用 `uni-popup` 组件,可以按照如下方式操作。需要注意的是,在 Vue3 中,由于框架本身的变化,部分 API 和语法也有所调整。 #### 导入依赖库 首先确保已经安装了最新版本的 `uni-app` 及其相关插件。如果尚未完成此步骤,则需先执行 npm 或 yarn 命令来获取所需资源[^1]。 #### 修改入口文件配置 对于基于 Vue3 构建的应用程序而言,应当修改位于项目根目录下的 `main.ts` 文件而不是 `main.js` 。在此处定义全局属性 `$popup` ,以便后续可以在任何地方调用该功能: ```typescript import { createApp } from 'vue' import App from './App.vue' // 引入 UniPopup 插件 import uniPopup from '@/components/uni-popup/uni-popup.vue' const app = createApp(App) app.config.globalProperties.$popup = { show(options){ const instance = new (app.component('UniPopup', uniPopup))({ propsData: options, mounted(){ this.open() } }) document.body.appendChild(instance.$el) instance.$mount() }, } app.mount('#app') ``` 上述代码片段展示了如何创建一个新的实例化对象,并将其挂载到 DOM 上;同传递参数给子组件用于控制显示行为。 #### 使用自定义事件处理逻辑 为了防止背景页面跟随滚动条移动,可在打开对话框之前禁用整个文档的触摸事件监听器,关闭后再恢复默认状态: ```javascript methods:{ open() { // 记录当前body样式 let originalStyle = document.body.style.overflow; // 禁止页面滑动 document.body.style.overflow = "hidden"; this.visible = true; // 对话框消失重置样式 this.$once('hook:beforeDestroy', () => { document.body.style.overflow = originalStyle || ''; }); }, close() { this.visible = false; } } ``` 这段 JavaScript 函数实现了当 `open()` 被触发会临改变 body 元素上的 overflow 属性值为 hidden 来阻止外部区域被拖拽,而在销毁前又自动还原初始设置[^3]。 #### HTML模板结构 最后一步是在页面内声明好相应的标记语言,这里给出一个简单的例子说明怎样嵌套放置按钮和模态窗口内容: ```html <template> <!-- ...其他HTML... --> <button @click="showDialog">点击查看案例</button> <uni-popup ref="dialogRef" type="center"> <div class="custom-content"> 这里是你想要呈现的具体信息... </div> </uni-popup> <!-- ...更多HTML... --> </template> ``` 以上就是关于如何利用 Vue3 创建居中的 `uni-popup` 并解决伴随而来的交互问题的方法介绍[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值