来自 技术 2019-03-18 00:00 的文章

简易ToggleButton

开发十年,就只剩下这套架构体系了!>>>

我参考了iViewiSwitch的实现:https://gitee.com/icarusion/iview/blob/2.0/src/components/switch/switch.vue

其根元素是一个span,这对我有所启发。我本打算用div做根元素。不过,其实html中的inputbutton这些元素都是行内元素,用span也许更合适。

在其内部,使用了一个隐藏的input记录控件的值value。我的简易ToggleButton没有这种需求,使用一个isActive记录即可。

还有,它使用了两个slot分别记录控件的两种样式。这种设计很好,我直接搬用。

点击根元素会触发toggle方法,另外按快捷键也会。不过我不需要快捷键。

最终代码实现如下,十分简洁:

<template> <!--默认为行内元素--> <span class="wrapper" @click="toggle"> <!--两个slot,分别对应两种状态--> <slot name="open" v-if="isActive"></slot> <slot name="close" v-else></slot> </span></template><script> export default { name: 'ToggleButton', data () { return { isActive: false } }, methods: { toggle () { // 触发样式变化 this.isActive = !this.isActive; // 触发事件 this.$emit('on-change', this.isActive); } } }</script><style scoped> .wrapper { cursor: pointer; }</style>