Element中ElMessageBox弹框内容及按钮样式自定义

需求背景：

要求展示文本内容红色字体突出展示
要求按钮为红色背景

代码实现如下：

jsx 复制代码

<template>
  <el-button plain @click="open">Click to open the Message Box</el-button>
  </template>

  <script lang="ts" setup>
    import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    '设置<span style="color: #f40;">确认按钮</span>的颜色. Continue?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      confirmButtonClass: 'el-button--danger',// 可以用element自带的，也可以完全自定义
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
  </script>

第一个要求：

dangerouslyUseHTMLString: true

设置完该属性后，可以在需要自定义样式的文本上使用标签样式实现

第二个要求：

第一种：element可以满足的样式，可以直接使用,如代码实现中

第二种：完全自定义样式，通过在style标签实现，切记不可带scoped，由于scoped属性的限制导致不生效。

confirmButtonClass: 'custom-style'

jsx 复制代码

<style lang="scss">
  .custom-style {
    /* 自定义样式 */
  }
</style>

实现效果如下：