vue中如何修改element $alert的按钮颜色

在Vue.js中，Element UI的Alert组件默认提供了一对操作按钮，如果你想修改这些按钮的颜色，可以借助CSS或者利用Element UI提供的自定义主题功能。

**1. 使用CSS直接覆盖样式**：
首先，在你的CSS文件或样式的 scoped 区域中，你可以选择`.el-alert button`这个类来针对所有的`$alert`的按钮进行样式修改。例如，如果你想要将默认的蓝色改为红色：

.el-alert button {
  color: red !important; /* 或者使用其他颜色值 */
}

记得在`.el-alert`前添加`:root`如果是在全局样式中应用：

:root .el-alert button {
  color: red !important;
}

**2. 利用Element UI的自定义主题**：
如果你希望在整个项目中统一更改这种样式，可以使用Element UI的自定义主题功能。首先安装并配置`@vue-cli-plugin-element-ui`，然后创建一个主题文件（如`src/assets/theme/index.js`），并在其中设置按钮颜色：

import { createTheme } from 'element-plus';

const theme = createTheme({
  alert: {
    success: {
      closeBtnText: '确定',
      closeBtnType: 'primary', // 修改成功提示框关闭按钮颜色，默认是'default'
    },
    danger: {
      closeBtnText: '取消',
      closeBtnType: 'danger', // 修改警告提示框关闭按钮颜色，默认是'danger'
    },
  }
});

export default theme;

最后，在main.js或者其他配置文件中导入并应用主题：

import Vue from 'vue';
import App from './App.vue';
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css"; // 引入主题样式
import theme from "@/assets/theme/index.js";

Vue.use(ElementPlus, {
  theme: theme
});

new Vue({
  render: h => h(App),
}).$mount("#app");

现在，`$alert`的按钮颜色应该按照你定义的主题设置了。