vue - 自定义Checkbox 样式组件

<template>
    <div class="checkbox_div">
        <div :class="`checkbox_div_one_${item.status}`" v-for="(item, index) in statusList" :key="index" @click="clickCheckbox(item)">
            <input type="checkbox" v-model="item.checked"  :class="`input_check_${item.status}`" :disabled="disabled" :checked="item.checked"
                />
            <span>{{item.status | convertCase}}</span>
        </div>
    </div>

</template>
<script>
export default {
/*
    dataList: [{
        * status: String,
        * checked: Boolean,
    }]
*/
  props: {
      dataList: {
          type: Array,
          default: []
      },
      checked:{
        type:Boolean,
        default:false
      },
      disabled:{
        type:Boolean,
        default:false
      }
  },
  data(){
    return{
    //   checked: false
     statusList: [],
     checkedList: []
    }
  },
  mounted() {
      this.statusList = JSON.parse(JSON.stringify(this.dataList))
  },
  methods:{
    clearCheckedList() {
        console.log('llllll')
        this.checkedList = []
        this.statusList.forEach(ele => {
            ele.checked = false
            document.querySelector(`.input_check_${ele.status}`).checked = false
        })
    },
    clickCheckbox(item) {
        let i = this.checkedList.findIndex(ele => ele.status == item.status)
        if(i == -1) {
            item.checked = true
            this.checkedList.push(item)
            document.querySelector(`.input_check_${item.status}`).checked = true
        } else {
            item.checked = false
            this.checkedList.splice(i, 1)
            document.querySelector(`.input_check_${item.status}`).checked = false
        }
        
        this.$emit('select-type', item)
        this.$emit('filterType', this.checkedList)
    }
  },
}
</script>
<style lang="scss" scoped>

// $statusArr: 'passed','failed'，'error', 'unfinished', 'tbc','skip', 'running', 'ready';
// $color_passed: '#73B05E';
// $color_failed: '#CC516B';
// $color_error: '#F9AB00';
// $color_unfinished: '#959799';
// $color_tbc: '#5470c6';
// $color_skip: '#cbced4';
// $color_running: '#F9AB00';
// $color_ready: '#73B05E';
// $color: $color_passed, $color_failed, $color_error, $color_unfinished, $color_tbc, $color_skip, $color_running, $color_ready;

// document.getElementsByTagName("body")[0].style.setProperty("--test1", "#FFF9EE");

@mixin sty_bg_border($color){
    border: 1px solid $color;
    background-color: $color;
}
@mixin input_sty($color) {
    input[type=checkbox]:before{
        @include sty_bg_border($color)
    }
    input[type=checkbox]:checked:before{
        @include sty_bg_border($color)
    }
    // input[type=checkbox]:disabled:before{}
}

@mixin input_passed{
    @include input_sty(#73B05E)
}
@mixin input_failed{
    @include input_sty(#CC516B)
}
@mixin input_error{
    @include input_sty(#F9AB00)
}
@mixin input_unfinished{
    @include input_sty(#959799)
}
@mixin input_tbc{
    @include input_sty(#5470c6)
}
@mixin input_skip{
    @include input_sty(#cbced4)
}
@mixin input_running{
    @include input_sty(#F9AB00)
}
@mixin input_ready{
    @include input_sty(#73B05E)
}



@mixin input_default{
    input[type=checkbox] {
        width: 15px;
        height: 15px;
        -webkit-appearance: none;
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        color: #d8d8d8;
        position: relative;
        cursor: pointer;
    } 
    input[type=checkbox]:before{
        content: "";
        display:block;
        width: 15px;
        height: 15px;
        box-sizing:border-box;  
        border-radius: 3px;
        position: absolute;
    }

    input[type=checkbox]:disabled:before{
        content: "";
        display:block;
        width: 15px;
        height: 15px;
        box-sizing:border-box;  
        border-radius: 3px;
        position: absolute;
    }
    input[type=checkbox]:checked:before{
        content: "";
        display:block;
        width: 15px;
        height: 15px;
        box-sizing:border-box;  
        border-radius: 3px;
        position: absolute;
    }
    input[type=checkbox]:checked:after{
        content: "";
        display:block;
        width: 6px;
        height: 9px;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff;
        border-radius:  2px;
        box-sizing:border-box; 
        position: absolute;
        transform: rotate(-135deg) translate(-70%, 20%);
        }
}
.checkbox_div{
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
}
@mixin checkbox_div_one{
    margin-right: 15px;
    display: flex;
    align-items: center;
    span{
        margin-left: 5px;
    }
}
@mixin checkbox_default_input{
        @include checkbox_div_one;
        @include input_default;
}


.checkbox_div_one_passed{
    @include checkbox_default_input;
    @include input_passed
}
.checkbox_div_one_failed{
    @include checkbox_default_input;
    @include input_failed
}
.checkbox_div_one_error{
    @include checkbox_default_input;
    @include input_error
}
.checkbox_div_one_tbc{
    @include checkbox_default_input;
    @include input_tbc
}
.checkbox_div_one_unfinished{
    @include checkbox_default_input;
    @include input_unfinished
}
.checkbox_div_one_skip{
    @include checkbox_default_input;
    @include input_skip
}
.checkbox_div_one_running{
    @include checkbox_default_input;
    @include input_running
}
.checkbox_div_one_ready{
    @include checkbox_default_input;
    @include input_ready
}

// @for $i from 1 through length($statusArr) {
//     .checkbox_div_one_#{nth($statusArr, $i)}{
//         @include checkbox_default_input;
//         @include input_sty(#{nth($color, $i)})
//     }
// }

</style>

 使用Sass 定义自定义复选框