我们知道，很多情况下我们会需要单选框，比如说首页导航，可能有[ home , events , messages ]等好几个选项，而我们往往只需要选定一个，每次选择的时候用点击事件控制路由即可，所以这个时候我们需要做一个组件，由于我是基于vue开发的，没有引入jq，主要是 因为我这是个小网站，引入jq有些大材小用了，所以我寻思得做一个vue组件来实现，说是用vue实现，其实大多都还是原生js的代码，下面放代码
<template>
<div class="collapse navbar-collapse">
<ul class="radio-button navbar-nav mr-auto" ref="self">
<slot></slot>
</ul>
</div>
</template>
<script>
export default {
name: "RadioButton",
data(){
return {
currentNode : null,
}
},
props : {
defaultValue : String
},
methods : {
init(){
let slotDom = this.$slots.default;
let n = 0;
for(let i in slotDom){
let node = slotDom[i].children[0].elm.parentElement;
if(n.toString() === this.defaultValue){
node.className += 'nav-link nav-item clickable active';
this.currentNode = node;
}
else
node.className += 'nav-link nav-item clickable';
n++;
node.addEventListener('click',(ev) => {
if(this.currentNode === ev.srcElement || !this.currentNode){
return;
}
this.currentNode.classList.remove('active');
ev.srcElement.classList.add('active');
this.currentNode = node;
});
}
}
},
mounted() {
setTimeout(this.init);
}
}
</script>
<style scoped>
</style>
我们使用了vue的slot机制，mount的时候初始化所有槽，给其加上单选框子选项的属性
let n = 0;
if(n.toString() === this.defaultValue){
node.className += 'nav-link nav-item clickable active';
this.currentNode = node;
}
else
node.className += 'nav-link nav-item clickable';
n++;
其中n和defaultValue是用来添加默认选项的属性的，给默认值添上一个active的属性
然后给这个dom对象添加上一个监听器，用来处理单选
node.addEventListener('click',(ev) => {
if(this.currentNode === ev.srcElement || !this.currentNode){
return;
}
this.currentNode.classList.remove('active');
ev.srcElement.classList.add('active');
this.currentNode = node;
});
如果当前被选中的选项等于我们点击的选项或者我们当前没有选中（也就是没有默认值，算作错误）就直接return，然后给我们要选的选项的classList中添加active值，再移除当前选中选项的active值，最后更换当前选中选项即可
很简单的一个操作，可是一开始我却弄了很久，最后得到这个目前最可行的方案
