亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2024年02月04日 10:09:42   作者:Uaenali  
this.$confirm是一個Vue.js中的彈窗組件,其樣式可以通過CSS進行自定義,下面這篇文章主要給大家介紹了關于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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 解決vue 更改計算屬性后select選中值不更改的問題

    解決vue 更改計算屬性后select選中值不更改的問題

    下面小編就為大家分享一篇解決vue 更改計算屬性后select選中值不更改的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 超級詳細的Vue安裝與配置教程

    超級詳細的Vue安裝與配置教程

    Vue web前端三大主流框架之一,是一套用于構建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue安裝與配置教程的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • vue3中defineProps傳值使用ref響應式失效詳解

    vue3中defineProps傳值使用ref響應式失效詳解

    這篇文章主要給大家介紹了關于vue3中defineProps傳值使用ref響應式失效的相關資料,文章通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2022-03-03
  • 解決VUE中document.body.scrollTop為0的問題

    解決VUE中document.body.scrollTop為0的問題

    今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue?項目性能優(yōu)化方案分享

    Vue?項目性能優(yōu)化方案分享

    本文是作者通過實際項目的優(yōu)化實踐進行總結而來,希望讀者讀完本文,有一定的啟發(fā)思考,從而對自己的項目進行優(yōu)化起到幫助
    2022-08-08
  • vue中報錯Duplicate?keys?detected:'1'.?This?may?cause?an?update?error的解決方法

    vue中報錯Duplicate?keys?detected:'1'.?This?may?c

    我們在vue開發(fā)過程中常會遇到一些錯誤,這篇文章主要給大家介紹了關于vue中報錯Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼

    vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼

    本文主要介紹了vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • 如何使用ant-design-vue的Table組件

    如何使用ant-design-vue的Table組件

    這篇文章主要介紹了如何使用ant-design-vue的Table組件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue項目WebPack打包刪除注釋和console

    Vue項目WebPack打包刪除注釋和console

    這篇文章主要介紹了Vue項目WebPack打包刪除注釋和console,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue項目首屏打開速度慢的解決方法

    vue項目首屏打開速度慢的解決方法

    這篇文章主要介紹了vue項目首屏打開速度慢的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03

最新評論