vue-switch
v1.3.0
Published
a beautiful switch component for vue
Downloads
474
Maintainers
Readme
vue-switch
a beautiful switch component for vue. (vue触发器组件)
demo
Env
vue.js + webpack + es6 + scss
install
npm
$ npm install vue-switch
Usage
相关参数
| 名称 | 类型 | 默认 | 说明 | | ----------------- | ----------------- | ---------------- | --------------------------------------------- | | value | twoWay | | 要绑定的变量 | | open-value | | true | 激活时绑定值 | | close-value | | false | 关闭时绑定值 | | open-name | String | "是" | 激活时显示文字 | | close-name | String | "否" | 关闭时显示文字 | | size | String | "md" | sm lg | | color | String | "red" | red/blue/orange/green | | disabled | Bollean | false | as u know |
示例([email protected]+)
<div id="app">
<label for="myDate">Do u love me ?</label>
<div class="wrap">
<switch size="sm" :value.sync="toggle"></switch>
</div>
<div class="wrap">
<switch size="sm" :value.sync="toggle" color="blue" :disabled="true"></switch>
</div>
<div class="wrap">
<switch size="sm" :value.sync="toggle" color="orange"></switch>
</div>
<div class="wrap">
<switch size="sm" :value.sync="toggle" color="green"></switch>
</div>
<div class="wrap">
<switch :value.sync="toggle"></switch>
</div>
<div class="wrap">
<switch open-name="Yes" close-name="No" color="blue"
:value.sync="toggle"></switch>
</div>
<div class="wrap">
<switch open-name="爱哦" close-name="不爱" size="lg" color="orange"
:value.sync="toggle"></switch>
</div>
<div class="wrap">
<switch open-name="Love" close-name="Hate" size="lg" color="green"
:value.sync="toggle"></switch>
</div>
</div>
<script>
import 'babel-polyfill'; //因为使用了es6的一些方法,需要babel垫片,如果你项目中已有相关兼容性方案,可忽略
import Vue from 'vue';
import mySwitch from 'vue-switch';
new Vue({
el: '#app',
data: {
toggle: true
},
components: {
'switch': mySwitch
}
});
</script>
示例([email protected]+)
<div id="app">
<label for="myDate">Do u love me ?</label>
<div class="wrap">
<my-switch size="sm" v-model="toggle"></my-switch>
</div>
</div>
<script>
import 'babel-polyfill'; //因为使用了es6的一些方法,需要babel垫片,如果你项目中已有相关兼容性方案,可忽略
import Vue from 'vue';
import mySwitch from 'vue-switch/switch-2.vue';
new Vue({
el: '#app',
data: {
toggle: true
},
components: {
'my-switch': mySwitch
}
});
</script>