极客宝典：点石成金！ElementUI 按钮颜色随意变！

前端

2024-01-17 09:30:26

让 ElementUI 按钮焕发生机：自定义色彩，随心所欲

简介

各位前端大拿们，准备好见证 ElementUI 按钮颜色的无限可能了吗？今天，我们将踏上改变按钮颜色的奇幻之旅，解锁前端开发的新境界，让你的按钮成为整个界面的点睛之笔！

一、ElementUI 预定义类名：一键换色，轻松搞定！

ElementUI 贴心地为我们提供了诸多预定义类名，只需在按钮组件上添加这些类名，就能瞬间改变按钮的色彩。这些类名可谓是前端界的大杀器，让按钮变色易如反掌。

el-button--primary： 沉稳的蓝色，如深海般宁静，赋予按钮专业可靠的气息。
el-button--success： 充满活力的绿色，如春意盎然，为按钮注入清新正能量。
el-button--warning： 醒目的橙色，如旭日东升，让按钮跃动着热情与活力。
el-button--danger： 炽热的红色，如火焰燃烧，赋予按钮危险而强烈的视觉冲击。

二、自定义 CSS 样式：挥洒创意，独一无二！

想要更个性化的按钮颜色？ElementUI 也为你敞开了大门！你可以创建自己的 CSS 类，然后在类中设置按钮的 background-color 属性，尽情发挥你的想象力，让按钮焕发独一无二的光彩。

步骤一：创建 CSS 类

.my-custom-button {
  background-color: #FF0000;
}

步骤二：应用 CSS 类

<el-button class="my-custom-button">自定义按钮</el-button>

就这样，你的按钮摇身一变，披上了你亲手打造的色彩外衣！

三、代码示例：点亮按钮，让界面更出彩

<template>
  <div>
    <el-button type="primary">蓝色按钮</el-button>
    <el-button type="success">绿色按钮</el-button>
    <el-button type="warning">橙色按钮</el-button>
    <el-button type="danger">红色按钮</el-button>
    <el-button class="my-custom-button">自定义红色按钮</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style>
.my-custom-button {
  background-color: #FF0000;
}
</style>