快捷導(dǎo)航

elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼

更新時(shí)間：2020年08月04日 09:34:03 作者：danbing2226

這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

先給大家展示效果圖：

在這里插入圖片描述

先上圖

<el-dialog title="對(duì)話框" :visible="true" @close="關(guān)閉事件()" @opened="打開事件()" class="想來(lái)點(diǎn)其他樣式">

主要是添加一下樣式

.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右上角的關(guān)閉按鈕，具體內(nèi)容如下所示：

最近使用了Element-UI中的Dialog對(duì)話框，因?yàn)樾枨笮枰サ粲疑辖堑年P(guān)閉按鈕，如圖所示：

在這里插入圖片描述

最后在網(wǎng)上找到了一個(gè)方法，直接上代碼

<el-dialog
 title=""
 :visible.sync="dialogVisible"
 :showClose="showClo" //主要是這個(gè)屬性設(shè)為false即可
 width="600px"
 center>
 <span>這是一段信息</span>
</el-dialog>

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

其中主要的就是showClose屬性，設(shè)置為false即可

方法來(lái)源：https://segmentfault.com/q/1010000012175677

總結(jié)

到此這篇關(guān)于elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)的文章就介紹到這了,更多相關(guān)elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)，生日欄表單三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
javascript一些不錯(cuò)的函數(shù)腳本代碼
收集一些不多見的好用的自定義函數(shù)代碼計(jì)算字符長(zhǎng)度的js函數(shù) 去字符中前后的空格的js函數(shù) 圖片自適應(yīng)大小函數(shù)代碼
2008-09-09
location.href 在IE6中不跳轉(zhuǎn)的解決方法與推薦使用代碼
在js中，我們經(jīng)常使用location.href來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，為了方便我們寫成函數(shù)。下面就分別說(shuō)明下，下面的一些代碼的實(shí)現(xiàn)問(wèn)題。
2010-07-07
JavaScript之clipboard用法詳解
這篇文章主要介紹了JavaScript之clipboard用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
自用js開發(fā)框架小成學(xué)習(xí)js的朋友可以看看
前段時(shí)間項(xiàng)目需要用到j(luò)s樹，找了好多都不符合項(xiàng)目需求，后來(lái)發(fā)現(xiàn)了梅花雪樹和js框架，類似C#名稱空間的用法讓我眼前一亮，遂拿來(lái)主義，讀了幾遍代碼后就開工了（我是個(gè)急性子呵呵），完成了大部分，最近才找出來(lái)測(cè)試了下。
2010-11-11
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析...
2006-08-08
js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁(yè)顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你
2013-03-03
【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼
下面小編就為大家?guī)?lái)一篇【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。給大家一個(gè)參考
2016-03-03
根據(jù)輸入郵箱號(hào)跳轉(zhuǎn)到相應(yīng)登錄地址的解決方法
本文分享了基于javascript實(shí)現(xiàn)的根據(jù)輸入郵箱號(hào)跳轉(zhuǎn)到相應(yīng)登錄地址的具體實(shí)例代碼，需要的朋友一起來(lái)看下吧
2016-12-12
Javascript 閉包詳解及實(shí)例代碼
這篇文章主要介紹了Javascript 閉包詳解及實(shí)例代碼的相關(guān)資料,閉包是一個(gè)特別抽象的概念，特別是ECMA規(guī)范給的定義，如果沒(méi)有實(shí)戰(zhàn)經(jīng)驗(yàn)，很難從定義去理解它，需要的朋友可以參考下
2016-11-11