vue-switch
a beautiful switch component for vue. (vue触发器组件)
demo
Env
vue.js + webpack + es6 + scss
install
npm
$ npm install vue-switchUsage
相关参数
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 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> 
