/vue-switch

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

Primary LanguageJavaScript

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

示例(vue@1.0+)

<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>

示例(vue@2.0+)

<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>