利用vue写一个复选框的组件

51 阅读 0 评论 34 点赞

我是靠谱客的博主无情店员，最近开发中收集的这篇文章主要介绍利用vue写一个复选框的组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述


HTML
<multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multicheck>

data

tlist:[
                {value:'A',label:'1'},
                {value:'B',label:'2'},
                {value:'C',label:'3'},
                {value:'D',label:'4'},
                {value:'E',label:'5'}
            ]
methods
getTtInfo:function(par){
            this.objInfo.tt= par;
        }

子组件：

<template>
    <div id="multicheck">
      <span v-for='item in source' class="check-item">
          <input ref='tt' type="checkbox" :value="item.value" name="tt" @click='updateValue($event.target.value)'>{{item.label}}
      </span>
    </div>
</template>
<style scoped type="text/css">
    .check-item{
        display:inline-block;
        padding-right:14px;
        font-size:14px;
    }
</style>
<script>
  export default{
      name:'multicheck',
      props:{
          source:{
              type:Array
          },
          busValue:{
              type:String
          }
      },
      data(){
        return{
            ttVal :this.busValue
        }
      },
      computed:{
      },
      methods:{
        busToArr(str){
           if(str!=''){
                if(str.indexOf(',')==-1){
                    return [str];
                }else{
                    return str.split(',');
                }
            }else{
                return [];
            }
        },
        busToStr(arr){
           return arr.join(',');
        },
        isInAarrayIndex(arr,e){
            var haveAindex={
                isHave:false,
                index:-1
            };
            if(arr.length==0){
                haveAindex.isHave = false;
                haveAindex.index = -1;
                return JSON.stringify(haveAindex);
            }else{
                for(var i=0;i<arr.length;i++){
                    if(arr[i]==e){
                        haveAindex.isHave = true;
                        haveAindex.index = i;
                        break;
                    }
                }
                return JSON.stringify(haveAindex);
            }
        },
        updateValue(value){
            var busCurtArr = this.busToArr(this.ttVal);
            var haveIndex = JSON.parse(this.isInAarrayIndex(busCurtArr,value))
            if(haveIndex.isHave){
                busCurtArr.splice(haveIndex.index,1);
            }else{
                busCurtArr.push(value);
            }
            busCurtArr.sort();
            this.ttVal = this.busToStr(busCurtArr);
            this.$emit('getTt', this.busToStr(busCurtArr));
        }
      },
      mounted:function(){
          if(this.ttVal!=''){
              var busArr = this.busToArr(this.ttVal);
              for(var i =0 ;i<busArr.length;i++){
                  this.$refs.tt.forEach(function(item){
                     if(item.value == busArr[i]){
                         item.checked = true;
                     }
                  });
              }
          }
          
          
      }

  }
</script>

转载于:https://www.cnblogs.com/xhliang/p/8781414.html