自己封装的Switch Button（Vue组件，checkbox改装），同时解决父子组件的事件冒泡问题的新思路

用一晚上的时间自己封装了一个Switch button组件，因为ElementUI里面那个是在是太难用了，尤其是其父组件也有点击事件的时候，解决冒泡问题真是让人头秃。。。

本组件用input checkbox改编的，不具有点击事件，父元素点击时，可以切换是否checked。

本博客方案也为事件冒泡问题提供了一个解决方案，也就是说，尽量让父子组件只有一个有点击事件，要不然只能让子组件有点击事件，然后让子组件通过@click.stop方式禁止冒泡，即，父组件就不具有点击事件了。

这里我们希望点击子组件，父组件点击事件发生，子组件不具备点击事件，所以只能让子组件没有点击事件，具体实现如下：

Switch_button.vue（纯用CSS3动画写的按钮，没有任何点击事件）

<!-- 自己做的Switch button，ElementUI里面那个太鸡儿难用了 -->
<!-- 用checkout button改编的，不具有点击事件，父元素点击时，可以切换是否checked -->
<!-- 按钮尺寸40*20 -->

<template>
    <div id="switch_button_xc">
        <input class="switch switch-anim" type="checkbox" />
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
.switch {
    width: 40px;
    height: 20px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 10px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
    cursor: pointer;
}
.switch:before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0.5px;
    left: 1px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
.switch:checked {
    border-color: #13ce66;
    box-shadow: #13ce66 0 0 0 16px inset;
    background-color: #13ce66;
}
.switch:checked:before {
    left: 21px;
}
.switch.switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s,
        box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch.switch-anim:before {
    transition: left 0.3s;
}
.switch.switch-anim:checked {
    box-shadow: #13ce66 0 0 0 16px inset;
    background-color: #13ce66;
    transition: border ease 0.4s, box-shadow ease 0.4s,
        background-color ease 1.2s;
}
.switch.switch-anim:checked:before {
    transition: left 0.3s;
}
</style>

使用：

<!-- 自己做的Switch button，使用方法 -->
<!-- 点击自己或者父元素可以实现切换 -->

<template>
    <div>
        <div class="father_div" @click="add_prop()">
            <v-switch-button
                ref="switch_button"
            ></v-switch-button>
        </div>
    </div>
</template>

<script>
import Switch_button_diy from '@/components/components_diy/Switch_button.vue' // 组件存放在项目下的地址

export default {
    data() {
        return {
            num: 0 // 0 默认是关上的
        }
    },
    methods: {
        add_prop() {
            if (this.num == 0) {
                this.$refs.switch_button.$el.childNodes[0].checked = true
                this.num = 1
            } else {
                this.$refs.switch_button.$el.childNodes[0].checked = false
                this.num = 0
            }
        }
    },
    components: {
        'v-switch-button': Switch_button_diy
    }
}
</script>

<style scoped>
.father_div {
    width:100px;
    height:100px;
    background:pink;
}
</style>

效果图：（只有粉色父组件和开关，其他为项目中的其他部分，上述代码中没有）

点击粉色父组件，可以自由切换开关，同时点击开关自己，也可以实现切换。