VUE3修改MessageBox弹框的按钮样式

最新推荐文章于 2025-03-24 14:12:23 发布

qq_44915190

最新推荐文章于 2025-03-24 14:12:23 发布

阅读量6.0k

点赞数 2

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_44915190/article/details/126725650

版权

本文介绍如何在Element Plus的message-box组件中，通过自定义confirmButtonClass属性改变确认按钮的背景色和字体颜色，以满足个性化需求。关键在于理解 scoped 样式限制，并提供了一个示例代码和相关CSS样式说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

message-box中，有时候，官方文档给出的样式，无法满足自定义的需求，需要自己根据需求进行自定义解决，例如修改退出按钮的背景色及字体颜色。message-box的confirmButtonClass支持自定义按钮样式。注意<style>中不能有scoped否则样式不能生效。

confirmButtonClass 取消按钮的样式，用法与confirmButtonClass一致。

<template>
  <el-button text @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(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: 'warning',
      confirmButtonClass:'ExitConfirmButton'
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>
//style中不能加入scoped，否则样式不生效
// !important 优先使用
<style>
    .ExitConfirmButton{
        background: #751d1d !important;
        color: #fff !important;
    }
</style>