自己模拟的复选框

效果图：

gif:

单个复选框

<template>
    <span class="home" @click="change">
        <span class="home_checkbox"
            :class="{active:checked}"></span>
        <label>{{_label}}</label>
    </span>
</template>

<script>
export default {
  props: ['_label', 'isAllCehcked'],
  data () {
    return {
      checked: false
    }
  },
  watch: {
    isAllCehcked (val) {
      if (val !== undefined) {
        this.checked = val
      }
    }
  },
  methods: {
    change () {
      this.checked = !this.checked
      this.$emit('change', {checked: this.checked, label: this._label})
    },
    toChecked () {
      this.checked = true
    },
    toUnChecked () {
      this.checked = false
    }
  }
}
</script>

<style scoped lang="scss">
.home{
    &_checkbox{ display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #FFFFFF;
        box-sizing: border-box;
        cursor: pointer;
    }
    label{
        font-size: 13px;
        color: #fff;
        cursor: pointer;
    }
    .active{
        background: #0DAACE;
        border: 1px solid #0DAACE;
    }
}
</style>

组合应用

<template>
<div class="home">
    <!-- 复选框 -->
    <div class="home_selections">
        <!-- 左边全选 -->
        <div class="home_selections_left">
            <checkBox :_label="all" @change="changeAll" :isAllCehcked.sync="isAllCehcked"></checkBox>
        </div>
        <!-- 右边每个选项框 -->
        <div class="home_selections_right">
            <div v-for="(item,index) in items" :key="index">
                <checkBox :_label="item" @change="changeItem" :ref="'checkbox'+index"></checkBox>
            </div>
        </div>
    </div>
    <!-- 排名 -->

</div>
</template>

<script>
/* eslint-disable */ 
import checkBox from './checkBox'
export default {
  components: {
    checkBox
  },
  data () {
    return {
      all: '全部',
      items: ['运检', '营销', '建设', '通信', '后勤', '集体企业'],
      isAllCehcked: false,
    }
  },
  computed: {
    // newIsAllCehcked () {
    //   const newIsAllCehcked = this.isAllCehcked
    //   return newIsAllCehcked
    // }
  },
  methods: {
    changeAll (item) {
      var e
      if (item.checked) {
        this.isAllCehcked = true
        for (e in this.$refs) {
          this.$refs[e][0].toChecked()
        }
      } else {
          this.isAllCehcked = false
        for (e in this.$refs) {
          this.$refs[e][0].toUnChecked()
        }
      }
    },
    changeItem (item) {
      var e
      var flag
      if (!item.checked) {
        this.isAllCehcked = false
      } else {
         flag =0
        for (e in this.$refs) {
          if (!this.$refs[e][0].checked) {
            flag += 1
          }
        }
        if(flag===0){
            this.isAllCehcked = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@mixin size($width,$height){
    width: $width;
    height: $height;
}
.home{
    @include size(100%,170px);
    &_selections{
        height: 50px;
        padding:5px 10px;
        box-sizing: border-box;
        &_left{
            float: left;
        }
        &_right{
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            div{
                min-width: 70px;
            }
        }
    }
}
</style>