vue3 antd项目实战——Modal弹窗自定义遮罩 （利用maskStyle属性自定义遮罩样式）

最新推荐文章于 2026-04-02 09:29:46 发布
原创 最新推荐文章于 2026-04-02 09:29:46 发布 · 5.6k 阅读 · 6
标签
#vue.js #前端 #javascript #typescript #anti-design-vue

vue3 antd项目实战——Modal弹窗自定义遮罩 maskStyle

知识回调

文章内容 文章链接
vue3 antd ts实战——ant-design-vue组件库引入 https://blog.csdn.net/XSL_HR/article/details/127396384?spm=1001.2014.3001.5501

本文沿用ant design vue组件库，上述文章可快速上手👆👆👆

场景复现

在后台管理系统的项目开发中，弹窗组件用到的地方很多。由于自带的默认样式不太符合视觉要求，因此需要利用maskStyle属性来自定义modal弹窗的遮罩样式。

具体需求： 修改默认蒙版样式更符合视觉
解决方法：使用组件库自带的api属性——maskStyle

实现效果：（弹窗的背景有一层可自定义的蒙版）
在这里插入图片描述

关于mask遮罩的API属性

点击传送至ant designvue官方文档弹窗组件

在这里插入图片描述
在API部分，以下三条是关于mask遮罩的属性👇👇

最低0.47元/天 解锁文章
ant design Modal 设置maskStyle遮罩样式，页面出现闪烁问题
Jack, what else can you do besides holding your little darling?
12-07 1894
https://www.antdv.com/components/modal-cn/#API 设置为：
教你用vue自定义指令做一个组件的遮罩层loading效果
球球不吃虾WHR2349博客
09-24 4264
时间有限，不上图了。 <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
突破AntDesignVue限制：实现API驱动的全局Loading遮罩层方案
最新发布
weixin_28077113的博客
04-02 222
本文详细介绍了如何突破AntDesignVue的Loading限制，实现API驱动的全局Loading遮罩层方案。通过动态DOM注入技术和z-index层叠上下文规则，解决了Spin组件在Modal弹窗中的层级问题，并提供了完整的API设计与Vue生态集成方案，帮助开发者灵活控制全局加载状态。
vue全局遮罩
seimeii的博客
07-31 1895
vue全局遮罩
Vue3 如何实现一个带遮罩的 dialog 对话框
fang_my的博客
02-14 3328
目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }
ant-design-vue 点击弹窗外的区域不关闭弹窗
weixin_41940856的博客
02-21 5624
1、官方组件自带点击弹窗区域外关闭弹窗 2、点击弹窗区域外关闭弹窗不关闭属性为：:maskClosable="false" 例如 <a-modal :title="title" :width="500" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading" :destroyOnClose="true" @cancel="handleCance
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
qq_39695210的博客
10-08 1746
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 8757
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
Vue3弹窗遮罩模板
2301_76513773的博客
07-06 770
【代码】Vue3弹窗遮罩模板。自用留档
vue项目中实现遮罩层
热门推荐
每日秃头
05-15 1万+
<template> <div id="app"> <div id="mask" ref="mask" @click="mask()"> <img src="..." class="mask_img"> </div> </div> </template> mounted() { this.$refs.mask.style.height = window.document.get
vue自定义弹出询问框、输入框、提示框(附源码及演示视频)
gdgztt的专栏
01-17 1万+
遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定。
vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗
weixin_45121510的博客
11-26 6898
父组件 <template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /
vue 嵌套el-dialo，当内层的弹窗弹出时，整个页面被遮罩
先完成，再完美—60分比0分强100倍
12-26 733
Dialog 嵌套时，嵌套的Dialog被遮挡
vue 全局透明遮罩层
Zhong_zong_ming的博客
01-08 3751
在Vue中创建一个全局透明遮罩层可以通过几个步骤来实现。这通常涉及到创建一个自定义组件，然后通过全局方法或在根Vue实例中动态创建组件实例来显示遮罩层。以上步骤实现了一个简单的全局遮罩层，你可以根据你的应用需要进行调整和增强（例如，添加动画或更多的自定义事件处理）。
iview弹窗拖拽效果和遮罩层同时使用
bihaiyanyu的专栏
12-15 2492
iview弹框一般是使用创建一个Modal组件，通过设置v-model属性控制弹框显示不显示。实现代码如下： <Modal :title="一个简单的弹框" v-model="isVisible" :width="500" > </Modal> 想要让弹框后不能操作页面的其他内容，实现遮罩效果也很简单，只要在Modal里面增mask-closable属性设置就可以了。iview中Moadl对话框是否有遮罩层默认属性是true，想要关闭设置成.
vue实现遮罩层
weixin_42785434的博客
07-07 3096
vue实现遮罩层 div.zzc{ background(0,0,0,0.5) top:0 right:0 left:0 bottom:0 position:fixed padding:100px 0 0 300px }
使用iview modal对话框点击遮罩层不关闭
qq_37496470的博客
03-12 4069
加上下面代码即可实现 :mask-closable="false"
vue3 | 自定义遮罩层组件
ydongabc
01-15 1726
【代码】vue3 | 自定义遮罩层组件。
React15.6.0实现Modal弹层组件
weixin_34195364的博客
03-06 647
代码地址如下：http://www.demodashi.com/demo/12315.html 注：本文Demo环境使用的是我平时开发用的配置：这里是地址。 本文适合对象 了解React。 使用过webpack3。 熟悉es6语法。 项目说明 项目结构截图 项目运行说明 npm install npm run start npm run startfe 登录localhost:80...
Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题
CSND7997的博客
06-30 3223
需求：在发送请求的时候需要给全局加loading样式，初步实现在App.vue中直接包裹整个router-view，然后监听vuex中的值，值在封装axios的时候，即请求拦截以及响应请求的时候改变 App.vue <div id="app"> <a-spin :spinning="LOADING_PAGE" size="large"> <router-view /> </a-spin> </div
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值