element-ui中this.$confirm提示文字中部分有顏色自定義方法
如圖
想要讓element-ui中的提示文字中,部分有顏色可以如下設置:
MessageBox 組件可以通過傳遞一個 HTML 片段來自定義對話框內(nèi)容的樣式。 注意,在使用 MessageBox 組件時需要添加 dangerouslyUseHTMLString: true 選項來啟用自定義 HTML 片段。
可以直接這么寫
this.$confirm('請確認是否將該干預策略<span style="color: red;">下線</span>,確認后立即生效。', '下線確認', { confirmButtonText: '確定下線', cancelButtonText: '取消', dangerouslyUseHTMLString: true, type: 'warning', }).then(() => { // 確認操作的代碼 }).catch(() => { // 取消操作的代碼 });
也可以封裝成一個變量
為了確保代碼的可讀性和可維護性,通過字符串模板來動態(tài)生成對話框的內(nèi)容。
handleOffline(row) { const operationText = '<span style="color: red;">下線</span>'; this.$confirm( `請確認是否將該干預策略${operationText},確認后立即生效。`, '下線確認', { 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 的自定義類名 整個comfirm框自定義類名 cancelButtonClass // 取消按鈕的自定義類名 confirmButtonClass // 確定按鈕的自定義類名 <style> .addcomfirm{ width: 500px; } .addqd,.addqx{ font-size: 20px;margin-top: 20px; } .addqx{ margin-right: 50px; } </style>
style部分注意不要加scoped,注意dialog彈出層與頁面元素的同級
總結
到此這篇關于element-ui中this.$confirm提示文字中部分有顏色自定義的文章就介紹到這了,更多相關element-ui提示文字顏色自定義內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3中defineProps傳值使用ref響應式失效詳解
這篇文章主要給大家介紹了關于vue3中defineProps傳值使用ref響應式失效的相關資料,文章通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03解決VUE中document.body.scrollTop為0的問題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue中報錯Duplicate?keys?detected:'1'.?This?may?c
我們在vue開發(fā)過程中常會遇到一些錯誤,這篇文章主要給大家介紹了關于vue中報錯Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼
本文主要介紹了vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12