🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A vue.js component used to create beautiful on/off toggle switches.

Other

Documentation

vue-switch

a beautiful switch component for vue. (vue触发器组件)

demo

click me.

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> 

You May Also Like