如何使用Vue 3和Element Plus修改子菜单按钮及选中复选框颜色

一、子菜单按钮点击变色实现 #

通过Vue状态绑定+类名/内联样式切换，就能实现点击变色效果：

1. 定义状态变量

data() {
  return {
    isBtnActive: false
  }
}

2. 按钮绑定事件与动态样式

<template>
  <button 
    class="submenu-btn"
    :class="{ 'active': isBtnActive }"
    @click="isBtnActive = !isBtnActive"
  >
    点击切换颜色
  </button>
</template>

3. 编写对应CSS

.submenu-btn {
  /* 默认样式 */
  background: #fff;
  color: #333;
  border: 1px solid #eee;
  padding: 6px 12px;
  cursor: pointer;
}

.submenu-btn.active {
  /* 点击激活后的样式，替换成你需要的颜色 */
  background: #869a1f;
  color: #fff;
  border-color: #869a1f;
}

如果想直接用内联样式绑定，也可以这样写：

<button 
  :style="{ backgroundColor: isBtnActive ? '#869a1f' : '#fff' }"
  @click="isBtnActive = !isBtnActive"
>
  点击切换颜色
</button>

二、复选框选中颜色改为rgba(134, 154, 31, 1) #

原生复选框样式无法直接修改，通过隐藏原生框+自定义元素模拟实现：

1. 模板结构

<template>
  <label class="custom-checkbox">
    <input type="checkbox" v-model="isChecked" />
    <span class="check-icon"></span>
    选项文本
  </label>
</template>

2. 状态变量

data() {
  return {
    isChecked: false
  }
}

3. 核心CSS样式

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/* 隐藏原生复选框 */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 自定义复选框默认样式 */
.check-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 3px;
  margin-right: 8px;
  transition: all 0.2s;
}

/* 选中后的背景与边框颜色 */
.custom-checkbox input[type="checkbox"]:checked + .check-icon {
  background-color: rgba(134, 154, 31, 1);
  border-color: rgba(134, 154, 31, 1);
}

/* 添加选中后的对勾标记 */
.custom-checkbox input[type="checkbox"]:checked + .check-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

内容的提问来源于stack exchange，提问作者coochie