vue弹窗滚动body跟随滚动问题

找了一些办法,具体可行并且比较简单的方法如下

<el-dialog @open="toggleBody(1)" @close="toggleBody(0)">
//表格内容
</el-dialog>
methods:{
// 打开弹窗,body不可滚动
    toggleBody(isPin) {
      if (isPin) {
        document.body.style.height = '100vh'
        document.body.style['overflow-y'] = 'hidden'
      } else {
        document.body.style.height = 'unset'
        document.body.style['overflow-y'] = 'auto'
      }
    }
    }

在el-dialog的open和close事件中绑定toggleBody方法,通过传值0或1 控制body的属性
备注:element内置的组件是不能修改的,可以进行二次封装。

猜你喜欢

转载自blog.csdn.net/weixin_43254676/article/details/87916679