checklist---vue

checkList是根据Vue.js新手教学|如何写一个Checklist组件这篇博客跟学写的。

前部分样式都一致，只在后部分vue实现交互部分我自己根据功能思考实现的，有所区别。

区别部分做以下说明：

3.2中加选中样式：

作者：
在checkbox标签上绑定一个事件selectedItem。

methods: {
     selectedItem (event) {
        const labelNode = event.target.previousElementSibling
        const classList = labelNode.classList
        classList.contains('selected') ? classList.remove('selected') : classList.add('selected')
    }
}

我：

3.3.2中对达到选中的数目后别的都灰掉

作者对watch和取dom节点$ref做了练习，
此处我的处理是：

 

    
        

            
{{item.title}}
            
{{item.desc}}
        
        

    
    

 methods:{
    disabledFun(id){
        if(this.checkboxValue.length==this.max){
            return this.checkboxValue.indexOf(id)==-1
        }
    }
}

4中组件的显示隐藏

作者是在子组件中做的显示隐藏
此处我的做法是：

 

    请选择考场：
    
        
    
    

使用的是过渡的方法做的，样式如下：

.fade-enter-active,.fade-leave-active{
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.fade-enter-to{
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
} 

所以蒙版也就在父组件中。

取消和确定的列表隐藏都是是通过子组件给父组件传递值来实现的。

//父组件中：
methods:{
    closes (msg){
        this.show=msg;
    }
}
//子组件中：
取消

methods:{
    closeIt(){
        this.$emit('getCancel',false)
    },
}

5中确定后向父组件传递值

作者使用的是父子组件之间的通信来实现的

我在此处：

数据是通过mock产生的。直接在子组件中进行了使用

确定后即选中的考场我使用的是vuex来记录这个状态值的。

//父组件中，input上绑定的value-addExam
computed:{
        addExam (){
            return this.$store.state.addExam.addExam.join(',');
        }
    },
//子组件中
methods:{
    confirmIt (){
        let checkExam =[];
        for (let i = 0;i{
                return this.checkboxValue[i] == value.id 
            })
            checkExam.push(this.examinationLists[index].title)
        }
        this.$store.dispatch('confirmExam',checkExam);
        this.$emit('getCancel',false)
    }
}

vuex中的内容参加store文件夹中。
源码见github