【组件封装】实现一个三种状态的勾选框

三种状态的勾选框

日常开发中，我们经常使用勾选框，无非是两种状态：选中、未选中；

本文的组件，实现三种状态：未选中、半选、已选中；

通过案例，感受vue中 model 的使用场景

调用效果及代码

不断点击勾选框，在未选中、半选、已选中三种状态之间切换

<!--
 * @Date: 2022-05-24 10:11:48
 * @Author: surewinT 840325271@qq.com
 * @LastEditTime: 2022-05-24 11:08:26
 * @LastEditors: surewinT 840325271@qq.com
 * @Description: 调用页面
-->
<template>
  <div class="">
    <p-three-checkbox :data="checkboxData" v-model="value" />
  </div>
</template>

<script>
import PThreeCheckbox from '@/components/p-three-checkbox';
export default {
  components: {
    'p-three-checkbox': PThreeCheckbox,
  },
  props: [],
  data() {
    return {
      checkboxData: {
        label: '哈哈哈',
        disabled: false,
      },
      value: 0,
    };
  },
  mounted() {},
  watch: {
    value() {
      console.log('变化了：', this.value);
    },
  },
  methods: {},
};
</script>

<style lang='scss' scoped>
</style>

组件源码

model 可以设置 v-model 的绑定值，使用数据双向传递；

用 num 记录勾选，在0、1、2三种状态间，来回切换；

<!--
 * @Author: surewinT 840325271@qq.com
 * @LastEditTime: 2022-05-24 10:52:13
 * @LastEditors: surewinT 840325271@qq.com
 * @Description: '具备三个状态'的勾选框组件
-->

<template>
  <span class="stateCheckBox">
    <el-checkbox
      v-model="check"
      :indeterminate="mid"
      :disabled="data.disabled"
      @change="change"
    >
      <span
        class="label"
        :class="[check ? 'active' : '', data.disabled ? 'disabled' : '']"
        >{{ data.label }}</span
      >
    </el-checkbox>
  </span>
</template>

<script>
/**
 * @description: props 说明
 * data {
 *  label: 显示的值，
 *  disabled：是否禁用
 * }
 */
export default {
  components: {},
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      check: false,
      mid: false,
      num: 0,
    };
  },
  mounted() {
    this.loadState(this.value);
  },
  watch: {
    num() {
      this.$emit('input', this.num);
    },
  },
  methods: {
    // 初始化状态
    loadState(num) {
      this.num = Number(num);
      this.chooseState(this.num);
    },
    // 改变状态
    chooseState(num) {
      this.check = num == 2 ? true : false;
      this.mid = num == 1 ? true : false;
    },
    // 点击多选框
    change() {
      this.num++;
      this.num > 2 ? (this.num = 0) : '';
      this.chooseState(this.num);
    },
  },
};
</script>

<style lang="scss" scoped>
.stateCheckBox {
  margin-right: 30px;
  .label {
    color: #606266;
  }
  .active {
    color: #409eff;
  }
  .disabled {
    color: #c0c4cc;
  }
}
</style>

仓库源码

后续补充