element 和naiveui 遮罩层遮罩层可点击穿透事件

于 2024-03-30 10:33:05 发布
阅读量428 收藏
点赞数 7
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41672186/article/details/137167538
版权
文章介绍了如何使用CSS调整elementUI和naiveui对话框的pointer-events属性，以实现去除遮罩层的效果，确保弹窗层元素的点击事件不受影响。
摘要由CSDN通过智能技术生成

1.element UI去掉遮罩层

.alldialog {

  width: 0px;

  pointer-events: none;

  ::v-deep .el-dialog__wrapper {

    pointer-events: none;

  }

  // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）

  ::v-deep .el-dialog {

    pointer-events: auto !important;

  }

  ::v-deep .el-dialog__body {

    pointer-events: auto !important;

  }

}

1.naiveui 去掉遮罩层

.showModals {

  pointer-events: none;

}

聪聪ii
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮
06-04
点击按钮弹出悬浮层，层上有数据且可以关闭 页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。
点击图片出现放大遮罩层
09-01
5. **关闭遮罩层**：为了提供关闭功能，可以在遮罩层上添加点击事件，点击时恢复图片和遮罩层的原始状态： ```javascript document.querySelector('.mask').addEventListener('click', function() { this.style....
Naive UI修改默认样式
weixin_51615179的博客
03-17 3040
因为大创的缘故，需要做出一个网站，在搭建网站的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。小白不知道应该如何使用样式穿透，同时和Naive UI相关的博客比较少，导致只能自己一步步摸索，所幸，找到了最后的解决办法。（注意，这个解法可能只适合Naive UI。
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
傲慢二锅头的博客
10-13 1万+
Vue3 ui组件库对比
Naive UI 之 修改组件样式
aliceyang2012的专栏
11-15 2094
Naive UI 组件样式
vue第三方ui样式库如何实现样式穿透的（ui库和less/sass穿透问题） ::v-deep scoped
ljhhhkj的博客
06-09 189
如果一个项目的所有style标签都加上了scoped属性，便可以使组件的样式不相互污染，私有独立。相当于实现了样式的模块化！
Vue 3的高颜值UI组件库
风水道人
11-30 6412
Vue 3的高颜值UI组件库
jquery滑动图片显示标题遮罩层
11-17
这包括图片元素和遮罩层元素。遮罩层通常是一个div，设置为绝对定位，以覆盖在图片上。例如： ```html <div class="title-mask">Title Goes Here ``` 接下来，我们需要使用CSS来定位和样式化这些元素。遮罩层默认...
基于mootools插件实现遮罩层新手引导
01-19
插件代码 代码如下: /* — name: UserGuider authors: – Garland Yang requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions] version: – 1.0 … */ var UserGuider = new ...
解决Vue开发中对话框被遮罩层挡住的问题
01-19
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示： 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative...
vue+element-ui实现dialog对话框样式穿透（pointer-events）
weixin_52012102的博客
12-24 2503
vue+element-ui实现dialog对话框样式穿透（pointer-events）
将elementUI，NaiveUI的progress环形进度条设置为渐变色
最新发布
qq_43807473的博客
12-25 2203
需求 ：进度条要有一个渐变效果。效果图：NaiveUI和elementUI的官方progress组件都是只能设置一种颜色，不符合需求所以改一下。其实NaiveUI和elementUI设置进度条的实现方式基本一样都是使用svg渲染出两个path，第一个是底色，第二个是进度条。elementUI的：NaiveUi的：可以看到唯一的区别就是 NaiveUi的path外层多包裹了一个g标签。实现思路就是我们自己创建一个可以有过度色的svg来替换掉第二个path。
透过遮罩层点击下方元素
qq_58845736的博客
02-18 1782
当有遮罩层遮住下方点击事件时，鼠标点击下方元素是无效的 1.可以直接在遮罩层添加pointer-events:none 2.当遮罩层也有需要点击的元素时，可以给遮罩层添加pointer-events:none，在遮罩层需要点击的事件上添加属性pointer-events:auto ...
naive UI 折叠面板设置折叠面板的可点击区域
lsjweiyi的博客
06-05 1582
我在使用naive UI 的折叠面板时，他有个特点，就是无论点击header的哪个位置，都会展开/折叠面板。且组件没有提供api设置可点击区域这个特点会带来一个问题，比如如下场景：由于我在header上设置的内容比较复杂，有按钮，导致这么一个问题，我点击自己的按钮，也会展开或折叠面板，那么就没办法友好的使用我自己的按钮了。 所以，我希望，只有点击左边的箭头图标时，才会展开或折叠面板。利用naive提供的受控模式，即点击面板的header之后，是否展开由我决定，而不是组件自己决定。通过自定义那个箭头图标，并且
Vue项目里使用element ui || naive ui在input框上使用v-model.trim等修饰符失效
leyu_miss的博客
03-17 3670
//navite ui为例 <n-input v-model:value="query.keyword" @blur="query.keyword=$event.target.value.trim()" clearable type="text" placeholder="请输入名称" />
前端UI框架汇总
热门推荐
缘如风的博客
02-17 6万+
本文整理了一些比较流行的前端UI框架，排名不分先后，仅供参考。可按照项目需求自行考虑。 1、bootstrap Bootstrap 是Twitter推出的一个用于前端开发的，一个用于 HTML、CSS 和 JS 开发的开源工具包，是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 官网：https://v4.bootcss.com/ 文档：https://v4....
vue修改Element UI样式，样式穿透
濮家大少
08-10 1万+
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。 但是如果你要想修改子组件的样式，就只能修改公共的样式，这样的话其他使用这个组建的地方都会改变，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。 有些Sass 之类的预处理器无法正确解析 >&gt
Naive UI初体验，跟随大佬们的脚步！
qq_41540361的博客
06-22 9816
本文相对应的链接地址 Naive UI: https://www.naiveui.com/zh-CN/os-theme Vue 3: https://v3.cn.vuejs.org/ Vite中文网: https://vitejs.cn/ 前言 尤雨溪推荐的 Vite 和 Naive UI 这也是我第一次使用 Vite 和 Naive UI Vite 安装 Vite NPM 安装 npm init @vitejs/app 让我们打开 CMD （ WIN + R ） 所有操作一目了然，非常的便捷 那项目
Vite+Vue3+Ts项目搭建（全套解决方案Vuex、VueRouter、elementplus、NaiveUI、全局深色模式、中英文切换）
qq_45740561的博客
08-14 4783
Vite+Vue3+Ts项目搭建（全套解决方案Vuex、VueRouter、elementplus、NaiveUI、全局深色适配、国际化） 使用Vite创建vue3+ts项目 # 创建vite项目 npm init @vitejs/app # 输入项目名称 ? Project name: » vite-devil-control # 然后选择vue （通过上下箭头切换，回车确定） # 然后选择vue或vue+ts 集成 Vue-Router 安装（两个任选其一） # router4.x版本 npm in
element ui 弹窗遮罩层的点击事件
08-29
通过以上配置，可以实现阻止element-ui弹窗遮罩层的点击事件关闭弹窗的效果。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [Vue项目element-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值