2020/12/31element-ui 同一页面多个对话框el-dialog 自定义样式

最新推荐文章于 2024-10-12 08:36:56 发布
原创 最新推荐文章于 2024-10-12 08:36:56 发布 · 5.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨如何在Vue中针对特定对话框组件应用独立样式，避免全局影响。通过添加自定义class和使用深度选择器，实现对单个组件的样式定制，同时保持其他组件样式不受干扰。详细步骤和示例代码可供参考。
  • 背景
    一个vue页面中，引用了两个对话框组件，只想对一个对话框进行样式设置（中间内容默认不居中，想让它居中），不影响另外一个，就不能用常规方法来设置
  • 通用修改样式方法
    比如这种
    el-dialog内容居中
    参考链接https://blog.youkuaiyun.com/HH18700418030/article/details/100124773?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai
  • 可以自定义custom-style 一般在el-dialog上添加class和style 解析到页面上并不会到最外层div上 一般设置出来都是无效的
    – 模版el-dialog自定义样式
    –css
    el-dialog自定义样式
  • 参考链接 有图 写得很好
    https://www.cnblogs.com/bomdeyada/p/10839221.html
VueDialog弹窗诟病轻松解决
梅花寺
01-18 1555
本质其实本次分享页并没有很多新意,这种引用式的封装,很多人也早都想到了,只不过感觉针对弹窗这块的封装,很多走了极端，要么就追求layer那种写法兼容习惯,要么干脆还是保留原样,只做一些特殊处理，属性还是原样保留了。至于回调,我之前虽然用过一段,但还是觉得不慎习惯，因为偶然有个共享弹窗存在确认后逻辑不同的问题给我造成了困扰,觉得写法有点儿变态,因此做了一些尝试和延展,觉得算是比较良性的一个调用方式吧。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
Vue+ElementUI中 el-dialog弹框蒙层问题
qq_37819505的博客
01-26 1826
开发项目时 页面中用到了2个<el-dialog></el-dialog>弹框（或者是dialog中再嵌套dialog），会出现2个灰色蒙版层叠加，需要再点一下蒙层才会消失。 用一个属性解决 :append-to-body="true" 详情转官网：https://element.eleme.cn/#/zh-CN/component/dialog ...
vue多弹窗解决问题
hmbbpdx的博客
11-11 2139
vue弹窗解决(实习) 希望有更好的方法提出意见 虚心接受
element单页面多个dialog情况下修改dialog高度
_____青絲
08-01 3657
之前写了个如何修改表单样式，今天用到了dialog，一个页面有5个的dialog，高度不一样，怎么修改？ 简单，给dialog加个id 修改时候你懂得： <el-dialog title="合同完成" id="achieve_dialog" center :visible.sync="achieve_dialog" width="600px"></el-dialog> ...
【el-dialog】解决同一组件使用俩个el-dialog，内容被遮罩层覆盖的问题
weixin_43923808的博客
03-13 1941
第二次弹框上面。
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
Element-ui css非网络引用，
07-26
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> <el-button @click=...
element-ui-v2.13.1.zip
05-21
此外，Element UI 还提供了诸如对话框（Dialog）、日期选择器（DatePicker）、轮播图（Carousel）、分页（Pagination）等复杂的组件，大大简化了前端开发过程。 总的来说，Element UI v2.13.1 提供了一套完整且易用...
前端在el-dialog中嵌套多个el-dialog
m0_50298323的博客
10-24 3574
前端在el-dialog中嵌套多个el-dialog
element ui Dialog 对话框 (多个弹框出现)
ZJ15981837003的博客
05-20 3805
Dialog 对话框
Element UI 两个el-dialog层级
最新发布
前端小菜鸟也有人起的博客
10-12 863
Element UI 两个el-dialog层级
vue中使用element-ui dialog(多个公用)
weixin_40780972的博客
10-29 7966
vue中使用element-ui dialog(新增和编辑公用) html内容 <el-button type="text" class="button" @click="creatBusinCent()">增加</el-button> <el-dialog width="39%" :title="titleName[dialogStatus]" :visibl...
elementUI 多层dialog 嵌套遮罩问题处理（亲测有效）
dyp5236587的专栏
07-27 1751
我是第一个dialog
elementui el-dialog 动态生成多个，点击按钮打开对应的 dialog
liudongyang123的博客
09-09 2324
根据后端返回的数据，动态生成表单，返回的数据中会有表单字段的类型，如果单选、多选、富文本，其它的属性还好说，重点说在富文本，因为我想通过 dialog 弹窗的方式，进行富文本编辑。1.在获取后台数据之后，定义一个对象，dialogObject:{}，然后通过数据，在 dialogObject 中设置字段false，因为是动态生成的，可能多个字段是富文本，那么当按钮点击的时候，dialog 要展示对应字段的富文本。2.在渲染 form 时，通过字段名称在 dialogObject 中找到对应的值，并设置到。
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了
jingzhuo3185的博客
06-09 5703
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了 问题描述：在同一个页面内，弹出两个dialog，第二个dialog在第一个dialog上方。第二个dialog里面是个form表单，表单里的el-select组件下拉选项被遮盖住了。 解决思路：下拉框z-index层级太低，所以需要修改下拉框的z-index。 但是直接在el-select添加样式，是不会对下拉框有影响的，还好我们在element-ui官网看到el-select 有popper-clas
vue 实现多个 element-ui Dialog且鼠标可以点击底层
John_jian_yo的博客
06-02 2640
使用 pointer-events 属性和 z-index 属性解决层级覆盖问题 pointer-events: 指定在什么情况下某个特定的图形元素可以成为鼠标事件的 target.对于浏览器来说, 只有 auto 和 none 两个值可用, 其它的几个是针对 SVG 的 (本身这个属性就来自于 SVG 技术). auto: 与 pointer-events 属性未指定时的表现效果相同, 鼠标不会穿透当前层.对于 SVG 内容, 该值与 visiblePainted 效果相同. none: 元素永..
element-ui：多个el-dialog弹框切换会出现闪烁
彭世瑜的博客
12-09 2343
使用多个element-ui组件el-dialog弹框切换。打开A弹框，点击关闭，紧接着打开B弹框。给第一个弹框关闭加一点延迟。会出现一个明显的闪烁。
Element UI中el-dialog双层嵌套bug，遮罩显示灰色（2026最新）
前端必备小窝
05-29 1375
Element UI中el-dialog双层嵌套问题，遮罩显示灰色并且无法操作
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值