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

三种状态的勾选框

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

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

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

调用效果及代码

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

组件源码

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

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

.stateCheckBox {
  margin-right: 30px;
  .label {
    color: #606266;
  }
  .active {
    color: #409eff;
  }
  .disabled {
    color: #c0c4cc;
  }
}

仓库源码

后续补充