elementui更改el-dialog关闭按钮的图标d的示例代码


Posted in Javascript onAugust 04, 2020

先给大家展示效果图:

elementui更改el-dialog关闭按钮的图标d的示例代码

先上图

<el-dialog title="对话框" :visible="true" @close="关闭事件()" @opened="打开事件()" class="想来点其他样式">

主要是添加一下样式

.el-dialog__headerbtn {
 top: 8px !important;
 background: url('https://你路径资源的url图片') left no-repeat;
 background-size: cover;
}
.el-dialog__headerbtn i {
 content: '修改下面的font-size可以改变图片的大小';
 font-size: 25px;
 visibility: hidden;
}

PS:下面看下如何去除Element-UI中dialog右上角的关闭按钮,具体内容如下所示:

最近使用了Element-UI中的Dialog对话框,因为需求需要去掉右上角的关闭按钮,如图所示:

elementui更改el-dialog关闭按钮的图标d的示例代码

最后在网上找到了一个方法,直接上代码

<el-dialog
 title=""
 :visible.sync="dialogVisible"
 :showClose="showClo" //主要是这个属性设为false即可
 width="600px"
 center>
 <span>这是一段信息</span>
</el-dialog>

export default {
 data() {
 return {
 showClo:false,
 }
 }
 }

其中主要的就是showClose属性,设置为false即可

方法来源:https://segmentfault.com/q/1010000012175677

总结

到此这篇关于elementui更改el-dialog关闭按钮的图标的文章就介绍到这了,更多相关elementui更改el-dialog关闭按钮的图标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 #Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 #Javascript
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP 断点续传实例详解
2017/11/11 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python版简单工厂模式
2017/10/16 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
C语言50道问题
2014/10/23 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android