快捷導(dǎo)航

vue修改this.$confirm的文字樣式、自定義樣式代碼實(shí)例

更新時間：2024年02月22日 10:31:19 作者：金烏Y

this.$confirm是一個?Vue.js?中的彈窗組件,其樣式可以通過?CSS?進(jìn)行自定義,下面這篇文章主要給大家介紹了關(guān)于vue修改this.$confirm的文字樣式、自定義樣式的相關(guān)資料,需要的朋友可以參考下

一、將dangerouslyUseHTMLString屬性設(shè)置為 true，message 就會被當(dāng)作 HTML 片段處理。
二、createElement 新建元素和對象，然后對新建的元素進(jìn)行標(biāo)簽化設(shè)置。
三、文字換行顯示
四、使用 customClass 設(shè)置MessageBox 的自定義類名，從而自定義樣式
附：vue element插件this.$confirm用法（取消也可以發(fā)請求）
總結(jié)

通常使用 confirm 確認(rèn)框時，一般這樣寫：

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

但偶爾也需要修改文字等樣式，這時該怎么做呢？

一、將dangerouslyUseHTMLString屬性設(shè)置為 true，message 就會被當(dāng)作 HTML 片段處理。

提示文字中，修改部分字體樣式時，可以這樣做：

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將<span style="color: red;">永久刪除</span>該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true, // 使用HTML片段
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

二、createElement 新建元素和對象，然后對新建的元素進(jìn)行標(biāo)簽化設(shè)置。

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement
        this.$confirm(
          '提示',
        {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning',
          message:h('p', null, [
	           h('span', null, '內(nèi)容可以是 '),
	           h('i', { style: 'color: red' }, 'xxxxx')
          ]),
          // iconClass:"el-icon-question colorYellow", // 需要修改 icon 圖標(biāo)，需要把注釋代碼打開，其中 colorYellow 表示圖標(biāo)顏色，(自定義圖標(biāo)的類名，會覆蓋 type)

        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

設(shè)置 iconClass 屬性，可以更改icon：

三、文字換行顯示

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const confirmText = ['第一行內(nèi)容',  '第二行內(nèi)容','第三行內(nèi)容']
        const newData = []
        const h = this.$createElement
        for (const i in confirmText) {
            newData.push(h('p', null, confirmText[i]))
        }

        this.$confirm(
          '提示',
        {
          title:'提示',
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning',
          message: h('div', null, newData),
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

四、使用 customClass 設(shè)置MessageBox 的自定義類名，從而自定義樣式

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'del-model', // 設(shè)置MessageBox 的自定義類名
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>
//注意這里不能將樣式放到scoped中！?。?
<style lang="scss">
.del-model {
  .el-button:nth-child(1) {
    width: 100px;//修改確認(rèn)按鈕的寬度
  }
  .el-button:nth-child(2) {
    margin-right: 10px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>

附：vue element插件this.$confirm用法（取消也可以發(fā)請求）

場景：彈出框的兩個按鈕都能分別請求接口

最簡單的彈出框就是“確定”“取消”，一般用戶點(diǎn)擊確定才會繼續(xù)接下來的動作，點(diǎn)擊取消則不做任何動作（即不會請求接口）。
如：

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

兩個按鈕都請求，則：

//任務(wù)下線
 offline(data){
     this.$confirm('是否開啟保存點(diǎn)？', {
         distinguishCancelAndClose: true,
         confirmButtonText: '是',
         cancelButtonText: '否', //相當(dāng)于 取消按鈕
         type: 'warning'
     }).then(() => {
         api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
             if (res.data.code === "100") {
                 this.$message({type: 'success', message: '下線成功!'})
                 this.getTableData()
             } else {
                 this.$message({type: 'error', message: res.data.msg})
                 this.getTableData()
             }
         })
     }).catch(action => {
     //判斷是 cancel (自定義的取消) 還是 close （關(guān)閉彈窗）
         if (action === 'cancel'){
             api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
                 if (res.data.code === "100") {
                     this.$message({type: 'success', message: '下線成功!'})
                     this.getTableData()
                 } else {
                     this.$message({type: 'error', message: res.data.msg})
                     this.getTableData()
                 }
             })
         }
     })

默認(rèn)情況下，當(dāng)用戶觸發(fā)取消（點(diǎn)擊取消按鈕）和觸發(fā)關(guān)閉（點(diǎn)擊關(guān)閉按鈕或遮罩層、按下 ESC 鍵）時，Promise 的 reject 回調(diào)和callback回調(diào)的參數(shù)均為 ‘cancel’（普通彈出框中的點(diǎn)擊取消時的回調(diào)參數(shù)）。如果將distinguishCancelAndClose屬性設(shè)置為 true，則上述兩種行為的參數(shù)分別為 ‘cancel’ 和 ‘close’。（注意：如果沒有設(shè)置distinguishCancelAndClose為true，則都默認(rèn)為取消）

這樣就可以在catch中拿到回調(diào)參數(shù)action進(jìn)行判斷做什么操作了