快捷導(dǎo)航

element-ui中this.$confirm提示文字中部分有顏色自定義方法

更新時(shí)間：2024年02月04日 10:09:42 作者：Uaenali

this.$confirm是一個(gè)Vue.js中的彈窗組件,其樣式可以通過(guò)CSS進(jìn)行自定義,下面這篇文章主要給大家介紹了關(guān)于element-ui中this.$confirm提示文字中部分有顏色的自定義方法,需要的朋友可以參考下

如圖

想要讓element-ui中的提示文字中，部分有顏色可以如下設(shè)置：

MessageBox 組件可以通過(guò)傳遞一個(gè) HTML 片段來(lái)自定義對(duì)話框內(nèi)容的樣式。注意，在使用 MessageBox 組件時(shí)需要添加 dangerouslyUseHTMLString: true 選項(xiàng)來(lái)啟用自定義 HTML 片段。

可以直接這么寫(xiě)

this.$confirm('請(qǐng)確認(rèn)是否將該干預(yù)策略<span style="color: red;">下線</span>，確認(rèn)后立即生效。', '下線確認(rèn)', {
  confirmButtonText: '確定下線',
  cancelButtonText: '取消',
  dangerouslyUseHTMLString: true,
  type: 'warning',
}).then(() => {
  // 確認(rèn)操作的代碼
}).catch(() => {
  // 取消操作的代碼
});

也可以封裝成一個(gè)變量

為了確保代碼的可讀性和可維護(hù)性，通過(guò)字符串模板來(lái)動(dòng)態(tài)生成對(duì)話框的內(nèi)容。

handleOffline(row) {
            const operationText = '<span style="color: red;">下線</span>';
            this.$confirm(
                `請(qǐng)確認(rèn)是否將該干預(yù)策略${operationText}，確認(rèn)后立即生效。`, '下線確認(rèn)',
                {
                    confirmButtonText: '確定下線',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                }
            ).then(() => {
                const params = {
                    type: 'offline',
                };
                lineMaterial(params, row.id).then(res => {
                    if (res.status === 200) {
                        this.init();
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消',
                });
            });
        },

附：elementUI this.$confirm 文字大小樣式

dangerouslyUseHTMLString:true   // message部分 以html片段處理
customClass //MessageBox 的自定義類(lèi)名   整個(gè)comfirm框自定義類(lèi)名
cancelButtonClass   // 取消按鈕的自定義類(lèi)名   
confirmButtonClass   // 確定按鈕的自定義類(lèi)名
 
<style>
.addcomfirm{
    width: 500px;
}
.addqd,.addqx{
    font-size: 20px;margin-top: 20px;
}
.addqx{
    margin-right: 50px;
}
</style>

style部分注意不要加scoped，注意dialog彈出層與頁(yè)面元素的同級(jí)

總結(jié)

到此這篇關(guān)于element-ui中this.$confirm提示文字中部分有顏色自定義的文章就介紹到這了,更多相關(guān)element-ui提示文字顏色自定義內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: