Vue封装一个radio组件

我们知道，很多情况下我们会需要单选框，比如说首页导航，可能有[ 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值，最后更换当前选中选项即可

很简单的一个操作，可是一开始我却弄了很久，最后得到这个目前最可行的方案