vue 修改 this.$confirm 的文字样式、自定义样式

通常使用 confirm 确认框时，一般这样写：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

但偶尔也需要修改文字等样式，这时该怎么做呢？

一、 将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。

提示文字中，修改部分字体样式时，可以这样做： 

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

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

二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。 

 

<template>
  <el-button type="text" @click="open">点击打开 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, '内容可以是 '),
	           h('i', { style: 'color: red' }, 'xxxxx')
          ]),
          // iconClass:"el-icon-question colorYellow", // 需要修改 icon 图标，需要把注释代码打开，其中 colorYellow 表示图标颜色，(自定义图标的类名，会覆盖 type)

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

 设置 iconClass 属性，可以更改icon：

 三、文字换行显示

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const confirmText = ['第一行内容',  '第二行内容','第三行内容']
        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>

或者：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const confirmText = ['第一行内容',  '第二行内容','第三行内容']
        const msg = confirmText?.join('\n') || ''
        const newData = [
            h('p', { style: 'color: #E6A23C; font-size: 14px; font-weight: bold;' }, '温馨提示：'),
            h('p', { style: 'white-space: pre-wrap;' }, msg)
        ];

        this.$confirm(
          '提示',
        {
          title:'提示',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          message: h('div', { style: 'max-height: 400px; overflow: auto' }, newData), // 设置最大高度、宽度滚动条
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

 四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'del-model', // 设置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;//修改确认按钮的宽度
  }
  .el-button:nth-child(2) {
    margin-right: 10px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>