vue点击出现蒙层

最新推荐文章于 2024-03-30 16:41:00 发布

原创最新推荐文章于 2024-03-30 16:41:00 发布 · 3.3k 阅读

5 ·

CC 4.0 BY-SA版权

前端相关记录（html/css/js/vue）专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用CSS和Vue.js的v-if指令控制一个代表蒙层的div元素的显示与隐藏。通过绑定变量a并利用点击事件触发函数，实现图片点击时蒙层的动态展示。

.mongolia{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

用一个div来代表蒙层，该div样式如上。用v-if绑定一个变量a来控制该div是否显示，初始默认不显示。点击图片（@click），触发一个函数，该函数改变a为true使蒙层显示出来。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bleach777

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue.js与OpenLayers控制蒙版层的显示与隐藏，实现蒙版中部挖空展示下方地图信息

ByteZenith的博客

08-12

465

综上所述，通过Vue.js和OpenLayers库的结合，我们可以轻松实现控制蒙版层的显示与隐藏，并在蒙版中部挖空展示下方地图信息的功能。本文将介绍如何使用Vue.js和OpenLayers库来实现控制蒙版层的显示与隐藏，并在蒙版中部挖空展示下方地图信息。生命周期钩子函数中，我们可以获取地图容器的DOM元素，并初始化地图对象。在Vue组件的JavaScript代码中，我们可以使用OpenLayers库来创建地图并添加蒙版图层。然后，我们创建了一个。最后，我们可以在Vue的根实例中渲染这个自定义的地图组件。

教你用vue自定义指令做一个组件的遮罩层loading效果

球球不吃虾WHR2349博客

09-24

4134

时间有限，不上图了。 <div class="w-box-connent" v-whr-loading="isloading"></div> 大概意思就是，有一个div，当isloading==true时候我要给这个div上面蒙上一层遮罩层。 Vue.directive('whr-loading', { bind(el, bindingvnode, vnode) { let divzhezhao = document.createElemen

参与评论您还未登录，请先登录后发表或查看评论

vue 弹出遮罩层样式实例

10-15

主要介绍了vue 弹出遮罩层样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue自定义指令实现加载蒙层效果

CFL的博客

03-30

792

Vue自定义指令实现加载蒙层效果

vue实现全局loading加蒙层

baozaoderenlei的博客

11-22

1538

vue实现全局loading加蒙层

vue 自定义蒙层引导

savivy的博客

12-03

2421

进入页面之后的新手指引

vue-解决弹出蒙层滑动穿透问题

西门吹雪

11-22

8827

vue-解决弹出蒙层滑动穿透问题遇到的问题】在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动。　【实现思路】 1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用 @touchmov

VUE点击弹出蒙版实现步骤

weixin_33935505的博客

09-01

2002

项目需求： 1.点击一个事件时弹出一个蒙版； 2.蒙版上有取消，删除事件；（点击取消时候蒙版消失，点击删除时，删除蒙版并消失）； 3.点击空白地方，蒙版也消失；先附上实现效果；图1：图2：代码：首先我这里是两个组件；蒙版是一个；列表是一个；其余的地方都可能用到。列表代码： <template> ...

vue.js的蒙层问题

a49jiurou的博客

07-29

706

单个弹窗如果被蒙层遮盖设置 <el-dialog :title="!dataVulueForm.id ? ‘新增’ : ‘修改’" :close-on-click-modal=“false” :model-append-to-body="false" :visible.sync=“visible”> 多个弹窗最外层弹窗关闭后，内层出现蒙层问题，一点击就消失，在最外层添加 <el-...

vue element dialog组件蒙层问题

qq_45675879的博客

01-13

1253

弹框遮罩蒙层在上，内容区域在下这种问题时因为父元素固定定位，但是层级比弹框的层级底造成的，也就是说设置固定定位时 z-index的值低于弹框的层级。 <el-dialog title="遮罩层问题" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false" :modal-append-to-body="false" > </el-dialog> :mo

vue解决弹出蒙层滑动穿透问题的方法

10-17

主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

html5蒙层效果

01-06

html5蒙层效果，可以在效果才层内编辑所需要的内容

vue遮罩层显示图片

qq_43059898的博客

12-10

1304

这个可以封装成组件名字为img.vue <template>  <div @click="bigImg" :class="imgSrc ? 'img-view-1' : 'img-view-2'" :style="{ height: imgSrc ? 'calc(100% - 60px)' : '0%', width: imgSrc ? '100%' : '0%', 'border-rad

vue中给背景图添加蒙版

chen的博客

07-12

1197

vue制作蒙版

VUE实现点击头像出现遮罩层的功能的两种方式

朱宏的博客

08-30

4456

本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是ie9不支持动画，ie8一下直接不支持位置移动。所以某就研究了第二种方式，就是利用相对位置的固定和display的是否显示来控制遮罩层，实现效果都差不多，个人推荐第二种，但是第一种有动画，对，就是那个高逼格的东西。直接上代码：第一种： <!DOCTYPE html> <h...

vue蒙层_解决弹出蒙层滑动穿透问题-vue

weixin_39881575的博客

01-14

257

【Swift学习】Swift编程之旅(二)在本节将介绍一些最基础的知识 swift提供自己版本的类型,下面说明几种简单的类型 Int 整型 Double和float 浮点型 String 字符串型 Bool 布尔型它也提供了3种主要的强大的 ...如何一次把所有wordpress插件都禁用了wordpress网站出现了问题,或者在更新一些数据的时候,需要先把插件全部都禁用了进行检查.那么如何一次...

【Vue3】自定义 Vue3 插件（全局实现 loading 页面加载动画蒙层）

小秀的博客

03-01

2639

【代码】【Vue3】自定义 Vue3 插件（全局实现页面加载动画）

Vue蒙层穿透问题

Whoopsina的博客

01-29

278

vue封装蒙层弹框组件时经常会遇到滑动蒙层蒙层下组件会一起滑动解决办法：给蒙层加上 @touchmove.prevent

vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。

qq_36571836的博客

05-18

6731

2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现出现该蒙层。

vue在div上添加一层透明的蒙层点击蒙层关闭div

最新发布

09-04

<think> 我们参考提供的引用信息，特别是引用[1]中关于模态框的层级和遮罩效果，以及Vue的过渡动画实现。用户的需求是为一个div添加透明蒙层，并且点击蒙层时关闭该div。这类似于模态框（Modal）的实现。实现思路： 1. 创建两个元素：一个是蒙层（遮罩），一个是内容区域（div）。 2. 蒙层设置为全屏，背景半透明（通常是黑色半透明），并且置于较高的层级（z-index），但内容区域应该比蒙层更高一层，以保证内容在蒙层之上。 3. 给蒙层绑定点击事件，点击时触发关闭操作（例如，隐藏蒙层和内容区域）。 4. 注意：为了避免点击内容区域时触发蒙层的点击事件（因为内容区域在蒙层之上），需要在内容区域的点击事件中阻止事件冒泡。另外，根据引用[2]中的知识点，如果我们需要动态添加或修改响应式数据，应该使用Vue.set（Vue2）或直接使用this（因为Vue3中可以使用reactive或ref，但如果是在Vue2中给对象添加新属性，必须使用Vue.set）。在这个场景中，我们可以用一个数据属性（如showOverlay）来控制蒙层和内容区域的显示与隐藏。步骤： 1. 在模板中，使用v-if或v-show控制蒙层和内容区域的显示（通常用v-if，因为蒙层可能不需要频繁切换，且可能包含大量内容）。 2. 蒙层和内容区域的样式设置：蒙层固定定位，铺满全屏；内容区域也使用固定定位，并设置更高的z-index。 3. 在蒙层上绑定点击事件，点击后设置showOverlay为false；在内容区域上绑定点击事件，并阻止事件冒泡，这样点击内容区域不会触发蒙层的点击事件。代码示例（Vue2）：注意：在Vue2中，如果要在组件内使用事件修饰符，我们可以使用`.stop`来阻止事件冒泡。模板部分： ``` <template> <div>  <button @click="showOverlay=true">显示蒙层和内容</button>  <div v-if="showOverlay" class="overlay" @click.self="hideOverlay">  <div class="content" @click.stop> 这里是内容区域，点击蒙层（内容区域之外）会关闭，点击内容区域不会关闭。 </div> </div> </div> </template> ``` 脚本部分： ``` <script> export default { data() { return { showOverlay: false } }, methods: { hideOverlay() { this.showOverlay = false; } } } </script> ``` 样式部分： ``` <style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明 */ z-index: 1000; /* 确保蒙层在页面顶层 */ display: flex; justify-content: center; align-items: center; } .content { position: relative; z-index: 1001; /* 比蒙层高，确保内容在蒙层之上 */ background: white; padding: 20px; border-radius: 5px; } </style> ``` 说明： - 蒙层（.overlay）使用固定定位，铺满全屏，背景半透明。 - 在蒙层上使用`@click.self="hideOverlay"`，这样只有当点击到蒙层本身（而不是子元素）时才会触发关闭。这样，当我们点击内容区域（.content）时，由于内容区域阻止了事件冒泡（`@click.stop`），所以不会触发蒙层的点击事件；而点击蒙层（内容区域以外的部分）就会触发关闭。 - 使用flex布局将内容区域居中。注意：在Vue3中，也可以使用类似的方法，但是Vue3的过渡类名与Vue2不同（根据引用[1]），但本需求没有用到过渡动画，所以无需考虑类名差异。如果需要添加动画效果，可以参考引用[1]中的过渡动画实现。扩展：如果希望点击ESC键也能关闭，可以在mounted中监听keyup事件，并在beforeDestroy中移除监听（Vue2）或者使用onBeforeUnmount（Vue3）。例如： ``` mounted() { window.addEventListener('keyup', this.handleKeyup); }, beforeDestroy() { window.removeEventListener('keyup', this.handleKeyup); }, methods: { handleKeyup(e) { if (e.key === 'Escape' && this.showOverlay) { this.hideOverlay(); } } } ``` 以上代码实现了基本的蒙层和内容区域，以及点击蒙层关闭的功能。根据引用[4]，我们也可以考虑封装成一个通用的组件，例如模态框组件，但用户当前需求只是为一个div添加蒙层并点击关闭，所以上述代码已经足够。引用[3]和[5]是关于设置背景图片的，与本需求关系不大。因此，我们给出上述解决方案。 </think> ### Vue中为div添加透明蒙层及其关闭功能的实现方法在Vue中实现透明蒙层点击关闭功能，关键在于**层级控制**、**事件处理**和**响应式状态管理**。以下是完整解决方案： #### 核心实现代码 ```vue <template> <div>  <button @click="showMask = true">显示蒙层</button>  <div v-if="showMask" class="mask" @click="closeMask" >  <div class="content" @click.stop> 这里是内容区域（点击我不会关闭） </div> </div> </div> </template> <script> export default { data() { return { showMask: false // 控制蒙层显示状态 } }, methods: { closeMask() { this.showMask = false; } } } </script> <style scoped> /* 蒙层样式 */ .mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */ z-index: 1000; /* 确保在顶层 */ display: flex; justify-content: center; align-items: center; } /* 内容区域样式 */ .content { background: white; padding: 2rem; border-radius: 8px; z-index: 1001; /* 高于蒙层 */ } </style> ``` #### 关键实现原理 1. **层级控制**（参考引用[1][^1]） - 蒙层使用 `z-index: 1000` 确保覆盖其他元素 - 内容区域使用更高层级 `z-index: 1001` 确保位于蒙层上方 2. **事件处理** - 蒙层绑定 `@click="closeMask"` 实现点击关闭 - 内容区域使用 `@click.stop` 阻止事件冒泡（避免点击内容时关闭） 3. **响应式控制**（参考引用[2][^2]） - 通过 `v-if="showMask"` 条件渲染 - 使用 `showMask` 响应式变量控制状态 4. **透明效果** - `background: rgba(0, 0, 0, 0.5)` 实现半透明 - 透明度通过第四个参数调整（0.5=50%） #### 进阶优化 1. **过渡动画**（参考引用[1][^1]）： ```vue <transition name="fade"> <div v-if="showMask" class="mask">...</div> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 2. **ESC键关闭**： ```javascript mounted() { window.addEventListener('keyup', e => { if (e.key === 'Escape') this.closeMask() }) } ``` 3. **滚动锁定**： ```javascript watch: { showMask(val) { document.body.style.overflow = val ? 'hidden' : 'auto' } } ``` #### 注意事项 - 移动端需添加 `viewport` 元标签确保全屏覆盖 - 复杂场景建议封装为可复用组件（参考引用[4][^4]） - Vue3中使用 `v-model` 控制状态更佳 > 通过合理运用层级控制、事件冒泡阻断和响应式状态管理，即可实现高效可靠的蒙层交互效果[^1][^4]。