checkList是根据Vue.js新手教学|如何写一个Checklist组件这篇博客跟学写的。
前部分样式都一致，只在后部分vue实现交互部分我自己根据功能思考实现的，有所区别。
区别部分做以下说明：
3.2中加选中样式：
作者：
在checkbox标签上绑定一个事件selectedItem。
<input type="checkbox" id="1" @click="selectedItem($event)" v-model="checkboxValue" style="display:none" value="1">
methods: {
selectedItem (event) {
const labelNode = event.target.previousElementSibling
const classList = labelNode.classList
classList.contains('selected') ? classList.remove('selected') : classList.add('selected')
}
}
我：
<label v-bind:for="item.id" class="line border-1px" v-bind:class="{selected:checkboxValue.indexOf(item.id)>=0}">
3.3.2中对达到选中的数目后别的都灰掉
作者对watch和取dom节点$ref做了练习，
此处我的处理是：
<div class="line-wrapper" v-for="(item,index) in examinationLists" v-bind:disabled="disabledFun(item.id)">
<label v-bind:for="item.id" class="line border-1px" v-bind:class="{selected:checkboxValue.indexOf(item.id)>=0}">
<div class="l">
<div class="title" :class="{'gray':disabledFun(item.id)}">{{item.title}}</div>
<div class="address" v-if="item.desc.length>0">{{item.desc}}</div>
</div>
<div class="r" :class="{'backgray':disabledFun(item.id)}"></div>
</label>
<input type="checkbox" name="" v-model="checkboxValue" v-bind:disabled="disabledFun(item.id)" style="display: none;" v-bind:id="item.id" :value="item.id">
</div>
methods:{
disabledFun(id){
if(this.checkboxValue.length==this.max){
return this.checkboxValue.indexOf(id)==-1
}
}
}
4中组件的显示隐藏
作者是在子组件中做的显示隐藏
此处我的做法是：
<div>
<label class="selExamLabel">请选择考场：</label><input type="text" class="selExamInput" :value="addExam" placeholder="请选择考场" v-on:click="show = !show">
<transition name="fade">
<checklist v-if="show" :max="maxNum" @getCancel="closes"></checklist>
</transition>
<div class="checklist-overlay" v-if="show"></div>
</div>
使用的是过渡的方法做的，样式如下：
.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;
}
}
//子组件中：
<span class="cancel" @click="closeIt">取消</span>
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<this.checkboxValue.length;i++){
let index = this.examinationLists.findIndex((value,index) =>{
return this.checkboxValue[i] == value.id
})
checkExam.push(this.examinationLists[index].title)
}
this.$store.dispatch('confirmExam',checkExam);
this.$emit('getCancel',false)
}
}
vuex中的内容参加store文件夹中。
源码见github
