java togglebutton_简易ToggleButton

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

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

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

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

最终代码实现如下，十分简洁：

@click="toggle">

export default {

name: 'ToggleButton',

data () {

return {

isActive: false

}

},

methods: {

toggle () {

// 触发样式变化

this.isActive = !this.isActive;

// 触发事件

this.$emit('on-change', this.isActive);

}

}

}

.wrapper {

cursor: pointer;

}