el-checkbox 自定义 复选框【多选框】

1. 自定义 多选框 el-checkbox;

预览：
注意：

1. 假如有全局字体引入会影响显示效果；
2. 去除el-checkbox__inner附加字体css font-family: not specified;；

---

---

Html:

 <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      >Check all</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :key="city" :label="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>

---

引入：返回Promise对象的异步数据接口:getAllPerm;
作用：请求多选框的总数据

// 返回Promise对象的异步数据接口:getAllPerm
import { getAllPerm } from "@/api/setting";
import { reactive, toRefs } from "@vue/reactivity";

---

vue.js :setup()
解构写法： const { data: res } = await getAllPerm();

1. data：后台定义的参数[ 解构出data ,是否是data具体看后台定义 ]；
2. res：前台定义的接收data的别名

setup() {
    // cities 初始静态值
    const dateState = reactive({
      checkAll: false,
      // 已勾选的选项
      checkedCities: [],
      // 全部可选的选项集合
      cities: [],
      // indeterminate和v-model绑定的a和b的值，如果true true 或者 true false样式为-，如果false true样式为√，如果false false样式为不勾
      isIndeterminate: true,
      cityOptions: [],
    });
    const handleCheckAllChange = (val) => {
      dateState.checkedCities = val ? dateState.cityOptions : [];
      dateState.isIndeterminate = false;
    };
    const handleCheckedCitiesChange = (value) => {
      console.log(value);
      const checkedCount = value.length;
      dateState.checkAll = checkedCount === dateState.cities.length;
      dateState.isIndeterminate =
        checkedCount > 0 && checkedCount < dateState.cities.length;
    };
    const GET_ALL_PERM = async () => {
      //  data为后台定义的参数, res为前台定义的data的别名;
      const { data: res } = await getAllPerm();
      dateState.cities = [];
      dateState.cityOptions = [];
      res[0]["children"].forEach((element) => {
        dateState.cities.push(element.title);
        dateState.cityOptions.push(element.title);
      });
    };

    return {
      ...toRefs(dateState),
      handleCheckAllChange,
      handleCheckedCitiesChange,
      GET_ALL_PERM,
    };
  },

---

自定义样式： 基于Element-plus官方样式调整；

/* 设置自定义边框 border属性、大小*/
:deep() .el-checkbox__inner {
  border: 2px solid #008454;
  width: 26px;
  height: 26px;
}

/* 复选框选项label字体颜色 */
:deep().el-checkbox .el-checkbox__label {
  color: red;
}

/* 全选按钮样式 */
:deep() .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff;
  border: 2px solid #008454 !important;
}

/* 1. 去除Elment-plus框架自带样式边框;2 .保证选中后高度不变 */
:deep() .el-checkbox__inner::after {
  border: none;
  width: 100%;
  height: 100%;
}

/* 刷新页面后；处于勾选状态的边框颜色;不设置会是Elment-plus自带样式颜色蓝 */
:deep().el-checkbox__input.is-checked .el-checkbox__inner {
  border: 2px solid #008454 !important;
}

/* focus状态:勾选后再取消边框颜色设置；不设置会是Elment-plus自带样式颜色蓝*/
:deep() .el-checkbox__input.is-focus .el-checkbox__inner {
  border: 2px solid #008454 !important;
}

/* 选中状态,取消勾选,背景色过度效果, 不设置会是Elment-Plus自带颜色蓝色 */
:deep() .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #008454;
  /* 属性规定应用过渡效果的 CSS 属性的名称--背景色 */
  transition-property: background-color;
  /* 过程0.3秒 */
  transition-duration: 0.3s;
  /* 指定切换效果的速度 */
  transition-timing-function: ease-in 50ms;
}

/* 勾选状态：对勾样式 */
:deep() .el-checkbox__input.is-checked .el-checkbox__inner::after {
  content: "\2713";
  background-color: #fff;
  position: absolute;
  line-height: 26px;
  font-size: 26px;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0s ease-in 50ms;
  color: #008454;
  font-weight: bold;
  transform: rotate(0deg) scaleY(1);
}