vue element 修改dialog 关闭按钮颜色

于 2024-01-17 11:06:34 发布
阅读量728 收藏 7
点赞数 6
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomandllj/article/details/135644959
版权
文章讨论了如何使用CSS样式修改ElemeUI(El-dialog)对话框中的关闭按钮颜色，包括hover状态下的白色显示。
摘要由CSDN通过智能技术生成 
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
	color: white;
}

满上
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何更改Dialog的标题与按钮颜色详解
08-29
主要给大家介绍了关于如何更改Dialog的标题与按钮颜色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。
Vue中el-dialog修改样式
08-13 8880
效果图： 使用： <template> <div> <LjButton @click="dialogVisible = true">打开弹出框</LjButton> <div class="LjDialog"> <el-dialog title="" :visible.sync="dialogVisible" :modal-ap.
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui中更换el-dialog弹窗中默认的关闭按钮
Shivy_的博客
11-15 3961
element-ui中更换el-dialog弹窗中默认的关闭按钮
element中Dialog和MessageBox弹框按钮和关闭图标样式修改
我是段段的博客
03-28 9611
项目中用到了比较多的Dialog弹框和MessageBox弹框，但是Element原始的组件样式 已经不符合项目的风格，所以需要对Element中的样式进行整体修改 原始的组件样式如下 原始Dialog弹框 原始MessageBox弹框 直接上修改完成的代码 重新写了一个类名oe-dialog-btn，在使用Dialog和MessageBox弹框的地方直接写此类名就好了 （可以将修改的样式写在全局公共样式中，这样整个项目都可以用了） /* 修改 取消 按钮默认的边框颜色 */ .oe-dialog-bt
Dialog背景色设定
tech_vina的专栏
04-21 333
<br />CBrush * m_brush; // m_brush = new CBrush(RGB(200,250,250s)); // HBRUSH CCsmdFutureFundsHedgeDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) { HBRUSH hbr = CDialog::OnCtlColor(pDC, pWnd, nCtlColor); // TODO: 在此更改 DC 的任何属性
vue种el-dialog某一页面修改背景颜色
最新发布
10-24 2059
【代码】vue种el-dialog某一页面修改背景颜色。
element-ui中dialog弹窗关闭按钮失效的解决
01-18
修改库存 visible.sync=kcDialog close=kcDialog> ... 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js index.html <script src=...
element ui 对话框el-dialog关闭事件详解
08-27
Element UI 是一套基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，用于构建美观、易用的 Web 应用界面。在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
1. **创建组件模板**：首先，需要创建一个新的Vue组件，包含Dialog或Drawer的基本结构，包括标题、内容区域和关闭按钮等元素。 2. **引入Element UI**：确保项目中已正确安装和引入Element UI，以便可以利用其提供...
dialog背景颜色问题
轩辕剑的专栏
03-22 1043
感谢 雨辰老师 解决了我困扰很久的问题 自定义 dialog 中 透明图片 显示背景 在style 中加入： @android:color/transparent  @android:color/transparent   我少加了一条，希望能够帮助和我一样有需要的人   常用自定义 dialog 的style：             @android:color/tra
element修改el-dialog的背景色
星银色飞行船的博客
03-29 5769
.el-dialog { background-color: rgb(160, 207, 255); }
ElementUI Dialog，MessageBox 关闭按钮悬停颜色修改
weixin_44999951的博客
07-06 966
(背景颜色需要自己调整 调整方法和上边代码类似)这里悬停颜色就变成我们定义的颜色了。
el-dialog去除暗色背景或修改其底色
weixin_45966674的博客
03-24 1837
直接在el-dialog标签上 设置modal true 表示要底层 false 表示不要。我们就能直接用通过父节点的穿透来改变他的样式 不用去担心影响到其他组件的样式。还有就是 可能我们是想改他的颜色 但他默认是在body下的。这就带出另一个属性 modal-append-to-body。这样 他就会被插入在 el-dialog的父节点下。还是在el-dialog下设置 参考代码如下。父节点的选择器 >>> .v-modal。最直接的是modal属性。设置底层是否在body下。
Vue项目中修改 element-ui 的dialog弹框事件，实现dialog背景模糊效果
hen12的博客
06-01 2763
element-ui修改dialog弹框事件，实现dialog背景模糊效果
Element-UI抽屉Drawer wrapper-closable属性 以及更改背景颜色
蓝胖子的博客
03-09 5168
Drawer 控制关闭打开 修改默认样式
element-ui的 Dialog 对话框添加背景图片
weixin_45384466的博客
03-02 4854
el-dialog样式修改
vue element 封装dialog 组件
04-05
以下是一个简单的 Vue Element 封装 dialog 组件的示例： ```vue <template> <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :height="height" :before-close="beforeClose"> <slot></slot> <div slot="footer"> <el-button @click="cancel">取消</el-button> <el-button type="primary" @click="confirm">确定</el-button> </div> </el-dialog> </template> <script> export default { name: 'MyDialog', props: { title: { type: String, default: '' }, width: { type: String, default: '50%' }, height: { type: String, default: 'auto' } }, data() { return { dialogVisible: false } }, methods: { // 打开对话框 open() { this.dialogVisible = true }, // 关闭对话框 close() { this.dialogVisible = false }, // 确定操作 confirm() { this.$emit('confirm') this.close() }, // 取消操作 cancel() { this.$emit('cancel') this.close() }, // 关闭前的操作 beforeClose(done) { this.$emit('beforeClose', done) } } } </script> ``` 使用示例： ```vue <template> <div> <el-button @click="openDialog">打开对话框</el-button> <my-dialog :title="dialogTitle" :width="dialogWidth" :height="dialogHeight" @confirm="handleConfirm" @cancel="handleCancel" @beforeClose="handleBeforeClose"> <div>这是对话框内容</div> <div>可以放置任何内容</div> </my-dialog> </div> </template> <script> import MyDialog from '@/components/MyDialog' export default { name: 'MyPage', components: { MyDialog }, data() { return { dialogTitle: '对话框标题', dialogWidth: '60%', dialogHeight: 'auto' } }, methods: { openDialog() { this.$refs.dialog.open() }, handleConfirm() { console.log('点击了确定') }, handleCancel() { console.log('点击了取消') }, handleBeforeClose(done) { console.log('关闭前的操作') done() } } } </script> ``` 在该组件中，我们使用了 Vue Element 中的 dialog 组件，并在其基础上封装了一些常用的功能，例如： - 可以通过 props 自定义对话框的标题、宽度和高度； - 可以通过默认插槽放置任何内容； - 可以通过事件监听点击确定和取消按钮的操作，并在关闭对话框前执行一些操作。 在使用时，只需要像使用 Vue Element 中的 dialog 组件一样，在需要使用对话框的地方加入 `MyDialog` 组件，并通过 props 自定义对话框的样式和标题，然后在需要打开对话框的地方调用 `open()` 方法即可。同时，我们也可以在父组件中监听对话框的确认、取消、关闭前等事件，并执行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值