vue3 - Ant Desgin Vue 组件库中修改对话框 a-modal 头部样式，ant框架中修改模态框modal头部样式（提供详细代码，完美解决使用/deep/或者v-deep无效的问题）

已于 2024-02-03 17:54:56 修改
阅读量3.1k 收藏 3
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： vue3 ant design vue 修改弹框组件a-modal样式 修改模态框modal头部样式 ant desi对话框组件样式 a-modal无法deep选中 vue3 a-moda样式穿透
于 2023-11-07 19:36:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134274106
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
169 篇文章 1154 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
80 篇文章 51 订阅 ¥9.90 ¥99.00
订阅专栏

效果图

在vue3+ant design vue组件库项目开发中，强力修改 a-modal 对话框(模态弹框) 头部 header 样式，解决各种deep选不中类或改不了的问题。

在这里插入图片描述

示例代码

用下面的办法，绝对可以搞定。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面; 适用人群：想要了解 Vue3 新语法以及项目的，想要查看如何引入 Element-Plus 库及 Mockjs 的假数据如何使用及引入语法的, 想要基于已经成功引入这些组件的基本工程，来事件新的 Vue3 demo 的； 其他说明：里面用的是 Vue3 新语法，使用 Element-Plus 库创建了一个表格页面，可以搭建新的页面;
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant design ui 的a-modal 样式修改
m0_54570434的博客
05-04 3091
此前一直不知道如何去修改modal对话框的样式，没错去改ant-modal-header 这些样式都没反应。今天看到了它给点API里面有一个getContainer getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body 当不设置它时，是挂载到body下面。 <div class="zr"> <a-button type="primary".
Vue3.0更改ant design vue 更改modal样式
weixin_53934815的博客
09-05 1319
原理也很简单，加上 scoped 属性后，在浏览器查看开发工具你会发现，组件模板里的每个 DOM 元素多了一个属性data-v-xxx，CSS 规则也有对应的属性选择器。配合 CSS属性选择器，样式规则就只应用到对应的组件了，这样就能防止互相干扰了。在 Vue 单文件组件 (.vue 文件）中给 style 标签加上 scoped 属性，然后里面定义的样式规则就会只作用于当前组件，不会影响到其他组件。deep 的原理就是将属性选择器里的属性移到上层，这样就能作用到所有子元素了。
vue2、a-modal自定义组件v-modal
最新发布
weixin_45979310的博客
04-09 131
【代码】vue2、a-modal自定义组件v-modal。
vue3 antd项目实战——修改和增加公用一个弹窗（页面组件传值）
XSL_HR的博客
06-02 4615
一篇文章教你学会如何在vue antd项目实战中将修改和增加共用一个表单的骚操作
ant design vue之 modal组件动态设置title
longgege001的博客
09-18 9594
今天遇到的问题，差点被自己蠢哭了。 问题背景：想要的效果本来是像下面这样。点击新增角色，title是 '新增角色名称'。点击编辑角色名，title是'编辑角色名称'。 一开始我陷入了一个误区，下面是部分关键代码 <template> <a-button @clcik="showNameDialog">新增角色</a-button> <a-button @click="showNameDialog(true)">编辑角色</a-butto.
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Yukinoshita_kino的博客
11-15 8486
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
a-modal
weixin_小白鼠的博客
06-09 7068
a-modal的样式调整 a-modal宽和高的设置 主要是通过a-modal自带的width和bodyStyle来设置 注意：a-modal的父盒子是body // 现在我要点击按钮，弹出对话框，对话框展示的是文本信息，我们也可以添加下载文本功能 <template> <div id="hello"> <div style="margin-top:50px"> <button @click="openDialog">打开对话框<
vue3 a-modal对话框样式问题
m0_61134931的博客
06-09 627
global类似于把样式全局化(没有作用域了)，也会影响其他a-modal组件得样式，:global更适用于button,input的使用。1. :global(选择器){css}只需在 a-modal加上style即可。2. 默认情况下会加一个行内样式。
vue3.0修改antdesginVue中对话框组件（＜a-modal＞）的头部样式
我只是个很菜的前端
05-29 1240
vue3.0修改antdesginVue中对话框组件（）的头部样式
更改 ant design vue 更改modal样式 vue3.0
susanliy的博客
06-17 4185
antd中大部分组件的样式都可以使用/deep/直接修改，但modal这个组件有点特殊，用这个方法没有效果，最后用了以下方法： 步骤： 1.需要在外部包一个div ref=“globalModal” 2.调用getContainer api :getContainer=“() => $refs.globalModal” 3.利用deep 对于css进行样式更改...
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 ...
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
near-admin-vue::thinking_face:一个基于vue和ant design的好用中后台前端框架
05-06
和的中后台开发框架，支持多页多路由打包，内置了多页打包自定义配置，优化打包vendor，全局快捷键，i18n国际化解决方案（带机翻功能），全局字典，本地mock，动态路由，权限验证等功能，基于，为后期兼容vue3做好...
【antd-vue】修改对话框 modal 的样式
落叶无声的专栏
09-27 3773
问题描述 antd-vue 修改对话框 modal 的样式 解决方法 template 中添加添加一下 <div ref="yourModal"></div> :getContainer="() => $refs.yourModal" css 中在类名前加 /deep/ 代码示例 <div ref="yourModal"></div> <a-modal v-model="visible" :title="name" @ok="handleOk"
Vue中定制公共组件之modal
qq_42127308的博客
09-20 2770
需求：整个项目的modal统一风格（本文以ant design of vue为例） commonModal组件： <template> <a-modal :title="modalTitle" centered :maskClosable="false" :visible="showModal" ...
bootstrap 解决模态框显示后页面偏移问题和背景颜色变黑问题
pig_999的博客
08-17 1881
/*解决模态框显示后页面偏移问题和背景颜色变黑问题*/ body.modal-open { overflow-y: auto !important; padding-right: 0 !important;//解决了右边框每次加17px问题 } .modal-backdrop { opacity: 0 !important; filter: alpha(opacity=0) !im...
Vue3学习（十三）之 Modal 对话框、表单的使用
专研技术结交志同道合的朋友
02-02 254
写在前面 好久没学习更新博客了，不是懒，也不是不想学习，而是之前把大部分精力都去谈恋爱了,没法做到学习和恋爱都兼顾的很好。 可能有的同学会说，六哥，你都这么努力了，咋还是分了？换我，我就能处理的很好。 我想说，兄弟你是怎么做到地？来文末留言，或者私信我即可！ 任务 点击每一行编辑按钮，弹出编辑框 编辑框显示电子书表单 表单的使用 秒变正经，进入正题，其实还是围绕Ant Design Vue...
vue 在a-modal中回到顶部，除了a-modal外，外层也有个滚动区域
05-27
如果在Vue的a-modal组件外还有一个滚动区域，那么你需要在backToTop方法中使用递归来实现回到顶部的功能。 具体的实现方法如下： 1. 在a-modal组件中添加一个按钮元素，例如： ```html <a href="#" class="back-to-top" @click="backToTop">回到顶部</a> ``` 2. 在Vue实例中定义backToTop方法，如下所示： ```javascript methods: { backToTop() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 0) { window.requestAnimationFrame(this.backToTop); window.scrollTo(0, scrollTop - scrollTop / 8); } } } ``` 在backToTop方法中，我们使用递归和requestAnimationFrame函数来定时执行滚动操作，直到页面滚动到顶部为止。其中scrollTop属性用于获取当前页面滚动的高度，scrollTo函数用于将页面滚动到指定的位置。 注意：需要在CSS中设置.back-to-top元素的样式，以确保按钮始终在页面的右下角显示。例如： ```css .back-to-top { position: fixed; bottom: 20px; right: 20px; } ``` 同时，需要在外层滚动区域的父元素上添加一个ref属性，例如： ```html <div class="scroll-wrapper" ref="scrollWrapper"> <!-- 外层滚动区域的内容 --> </div> ``` 然后，在backToTop方法中使用this.$refs.scrollWrapper来获取外层滚动区域的元素，例如： ```javascript methods: { backToTop() { let scrollWrapper = this.$refs.scrollWrapper; let scrollTop = scrollWrapper.scrollTop; if (scrollTop > 0) { window.requestAnimationFrame(this.backToTop); scrollWrapper.scrollTo(0, scrollTop - scrollTop / 8); } } } ``` 这样，就可以实现在a-modal组件中回到顶部，并且处理了外层滚动区域的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值