vue-switch-elsewares
vue-switch-elsewares
A switch component for Vue 2 based on dai-siki's work.
demo
Env
vue.js + webpack + es6 + scss
install
npm
$ npm install vue-switch-elsewares
Usage
Attributes
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
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 |
Example ([email protected]+)
<div id="app">
<label for="myDate">Truthiness?</label>
<div class="wrap">
<my-switch size="xl" on-label="foo" off-label="bar" on-value="" off-value="" v-model="toggle"></my-switch>
</div>
</div>
<script>
import 'babel-polyfill';
import Vue from 'vue';
import mySwitch from 'vue-switch/switch-2.vue';
new Vue({
el: '#app',
data: {
toggle: true
},
components: {
'my-switch': mySwitch
}
});
</script>
Dependencies
Dependencies
babel: ^6.5.2babel-core: ^6.17.0babel-loader: ^6.2.5babel-plugin-transform-runtime: ^6.15.0babel-polyfill: ^6.16.0babel-preset-es2015: ^6.16.0babel-preset-stage-2: ^6.17.0babel-preset-stage-3: ^6.17.0browser-sync: ^2.13.0classnames: ^2.2.5css-loader: ^0.23.1gulp: ^3.8.8gulp-autoprefixer: ^3.1.1gulp-changed: ^1.3.0gulp-load-plugins: ^1.2.4gulp-plumber: ^1.1.0gulp-sass: ^2.3.2gulp-uglify: ^2.0.0gulp-util: ^3.0.7gulp-watch: ^4.3.6gulp.spritesmith: ^6.2.1html-webpack-plugin: ^2.22.0node-sass: ^3.8.0sass-loader: ^4.0.0scss: ^0.2.4scss-loader: ^0.0.1style-loader: ^0.13.1vinyl-named: ^1.1.0vue: ^1.0.28vue-html-loader: ^1.2.3vue-loader: ^8.5.4vue-style-loader: ^1.0.0webpack: ^1.13.1webpack-stream: ^3.2.0