Toggle

表单组件 / Toggle开关组件

注意

使用 v-model 切换状态, 不支持checked属性

说明

Toggle组件和Checkbox组件的功能类似, 但是Toggle组件在移动端更加好看, 也更加易用. Toggle可以设置颜色, 当然不同模式下的样式还是不一样的, 感兴趣的可以切换试试.

如何引入

// 引入
import Toggle from 'vimo/lib/toggle'
// 安装
Vue.component(Toggle.name, Toggle)
// 或者
export default{
  components: {
   Toggle
 }
}
源码:

传入属性 / Props:

Name Type Attributes Default Description
mode String <optional>
 'ios' 模式: "ios", "md"
color String <optional>
 颜色: "primary", "secondary", "danger", "light", and "dark"
disabled Boolean <optional>
 false 禁用状态

对外事件 / Fires:

用法 / Usages

<vm-list>
   <vm-list-header>
       普通使用
   </vm-list-header>
   <vm-item>
       Toggle Normal
       <vm-toggle slot="item-end"></vm-toggle>
   </vm-item>
   <vm-item>
       Red Toggle
       <vm-toggle slot="item-end" color="danger"></vm-toggle>
   </vm-item>
   <vm-item>
       Toggle Open
       <vm-toggle slot="item-end"></vm-toggle>
   </vm-item>
   <vm-item>
       Toggle Close
       <vm-toggle slot="item-end"></vm-toggle>
   </vm-item>
   <vm-item>
       Toggle Disabled
       <vm-toggle slot="item-end" v-model="checked"></vm-toggle>
   </vm-item>
</vm-list>

事件 / Events

onChange

源码:
属性 / Properties:
Name Type Description
isChecked Boolean

是否选中

Toggle组件切换时发出的事件, 传递当前的选中状态