vue 弹出遮罩层样式实例

 更新时间:2020年07月22日 10:03:02   作者:lx_1024  
这篇文章主要介绍了vue 弹出遮罩层样式实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式。

<div class='popContainer'></div>

div.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

这样遮罩层就会占满屏了

补充知识:vue 锁定蒙版 不让里面页面滑动

其实就是一句代码,在你的蒙版里面添加一句@touchmove.prevent就好了,下面是例子

<!-- 阴影背景层 --> <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>

以上这篇vue 弹出遮罩层样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js rules校验规则举例详解

    Vue.js rules校验规则举例详解

    Vue表单校验规则(rules)是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下
    2024-02-02
  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    文件上传在很多项目中都用的到,如果是几M的很快就传送完毕,如果是大文件呢?本文将利用Vue+Node实现大文件上传和断点续传,感兴趣的可以了解一下
    2022-04-04
  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    最近一直在做的项目是Vue2搭建的项目,本文主要介绍了Vue全局自定义指令Modal拖拽的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 如何在Vue3中正确使用ElementPlus,亲测有效,避坑

    如何在Vue3中正确使用ElementPlus,亲测有效,避坑

    这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑!具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue debug 二种方法

    vue debug 二种方法

    这篇文章主要介绍了vue debug 二种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue中v-cloak的作用和原理解析

    vue中v-cloak的作用和原理解析

    v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除,本文详细介绍vue中v-cloak的作用和原理解析,感兴趣的朋友一起看看吧
    2023-09-09
  • vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue3 将组件手动渲染到指定元素中的方法实现

    Vue3 将组件手动渲染到指定元素中的方法实现

    本文主要介绍了Vue3 将组件手动渲染到指定元素中的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue实现全屏滚动效果(非fullpage.js)

    vue实现全屏滚动效果(非fullpage.js)

    这篇文章主要为大家详细介绍了vue实现全屏滚动效果,非fullpage.js,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • el-table 动态合并不定项多级表头的方法

    el-table 动态合并不定项多级表头的方法

    本文主要介绍了el-table 动态合并不定项多级表头的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论