0.4.1 • Published 7 years ago
pzvue-switch v0.4.1
vue-switch
install
npm install pzvue-switch
Demo
http://vue.zuoyan.space/#/component/switch
Quick Start
import pzswitch from 'pzvue-switch'
in component
components: {
pzswitch
}
in template
<h2 class="title">普通</h2>
<pzswitch @change="change">
<i slot="open">开</i>
<i slot="close">关</i>
</pzswitch>
<h2 class="title">大小</h2>
<pzswitch @change="change" size="larger" :checked="true">
<i slot="open">开启</i>
<i slot="close">关闭</i>
</pzswitch>
<h2 class="title">不可用</h2>
<pzswitch @change="change" size="larger" :disabled="true" :checked="true">
<i slot="open">开启</i>
<i slot="close">关闭</i>
</pzswitch>
Attribute
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | string | larger | ||
disabled | 禁用 | boolean | true, false | false |
checked | 是否选中 | bool | true, false | false |
change | change事件 | function | function(value, ischecked){} |
Event
事件名 | 说明 | 原型 |
---|---|---|
change | 开关变化时触发,返回当前的状态 | function(ischecked){} |
Slot
名称 | 说明 |
---|---|
open | 自定义显示打开时的内容 |
close | 自定义显示关闭时的内容 |
0.4.1
7 years ago