vue 封装 checkbox 组件，纯css手写，需修改样式可

zl-checkbox

<template>
  <input type="checkbox" 
    class="input_check" 
    :disabled="disabled" 
    :checked="checked"
    @change="change"/>
</template>
<script>
export default {
  data(){
    return{
      // checked: false
    }
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods:{
    change(e){
      this.$emit('change', e.target.checked)
    }
  },
  props:{
    checked:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<style lang="less" scoped>
input[type=checkbox] {
  width: .4rem;
  height: .4rem;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  color: #d8d8d8;
  position: relative;
} 
input[type=checkbox]:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #ddd;
  background-color: #fff;
  box-sizing:border-box;  
  border-radius: 3px;
  position: absolute;
}

input[type=checkbox]:disabled:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #333;
  background-color: #333;
  box-sizing:border-box;  
  border-radius: 3px;
  position: absolute;
}
input[type=checkbox]:checked:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #D2A47E;
  background-color: #D2A47E;
  box-sizing:border-box;  
  border-radius: 3px;
  position: absolute;
}
input[type=checkbox]:checked:after{
  content: "";
  display:block;
  width: .15rem;
  height: .3rem;
  border-left: .06rem solid #fff;
  border-top: .06rem solid #fff;
  border-radius:  .06rem;
  box-sizing:border-box; 
  position: absolute;
  transform: rotate(-135deg) translate(-70%, 25%);
}
</style>

组件调用

<zl-checkbox v-model="checked" @change="change"></zl-checkbox>
<script>
export default {
  components: {

  },
  computed: {

  },
  data() {
    return{
      checked:true
    }
  },
  methods:{
    change(val){
        console.log(val)
    }
  }
}

更多详细知识介绍请访问我的个人主页