介紹
在使用element-ui 框架里的 el-dialog 組件時(shí)，要修改彈窗里默認(rèn)的關(guān)閉圖標(biāo)；如下圖所示：左邊是想要替換后的；右邊是組件默認(rèn)的關(guān)閉圖標(biāo)；
解析
通過檢查組件的元素；發(fā)現(xiàn)組件默認(rèn)的關(guān)閉是一個(gè)圖標(biāo)；通過圖標(biāo)的形式展現(xiàn)的。
那就可以通過 CSS 隱藏當(dāng)前的圖標(biāo)；然后在當(dāng)前圖標(biāo)的父級(jí)盒子上；設(shè)置他的背景圖片，來引入我們對(duì)應(yīng)的圖片。
代碼
核心代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-528320.html
.el-dialog__headerbtn {
background: url("~/assets/images/close-dialog.png");
background-size: cover;
height: 20px;
width: 20px;
i {
display: none; // 在這里隱藏彈窗默認(rèn)的關(guān)閉圖標(biāo)
}
}
注意： 彈窗組件里默認(rèn)的關(guān)閉；是一個(gè)圖標(biāo)；我們通過設(shè)置background的方式添加的是一張圖片；不是圖標(biāo)；文章來源地址http://www.zghlxwxcb.cn/news/detail-528320.html
到了這里，關(guān)于element-ui中更換el-dialog彈窗中默認(rèn)的關(guān)閉按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
