docs for vue-toggle-button 

> VueJs for toggle button

安装 (Installation)

- #### 添加包:

`` bash
$ yarn add vue-toggle-button
`
` bash
$ npm install vue-toggle-button
`

- #### 引入模块
`
import ToggleButton from "vue-toggle-button";
`

- #### 文件引入
`





`

- #### 示例


`base


HTML

mode="checkbox"
v-model="value"
:options='options'>

JS

Vue.component('toggle-button', VueToggleButton.toggleButton)
const vm = new Vue({
el: "#app",
data() {
return {
options: [
{label: "Active", value: 'active'},
{label: "Deactive", value: 'deactive'}
]
value: 'active'
};
}
});
`

按钮切换

- #### 尺寸

`

`

`

`

`

`
- #### 样式设置


`

`

`

`

`

`

- #### 是否可用


`

`

复选框切换

- #### 尺寸

`

`

`

`

- #### 样式设置


`

`

`

`

- #### 是否可用

`

`

事件


- #### 改变前回调方法
`
HTML
v-model="value"
mode="checkbox"
size="sm"
:options='options'
:before="changeBefore">

JS
const vm = new Vue({
data() {
return {
value: false,
options: [
{label: "Active", value: false},
{label: "Deactive", value: true}
]
};
},
methods: {
/**
* 改变前回调
*
* @param obj.value 改变后值
* @param obj.event 当前对象
*
* @return Boolean true=修改当前值 false=不修改当前值
*/
changeBefore(obj) {
var value = obj.value;
var event = obj.event;

if (confirm('改变后状态是' + value + ', 确认修改？')) {
return true;
} else {
return false;
}
}
}
});
`

- #### 改变回调方法
`
HTML
v-model="value"
size="sm"
:options='options'
@change="change">

JS
const vm = new Vue({
data() {
return {
value: false,
options: [
{label: "Deactive", value: false, checked: "warning"},
{label: "Active", value: true, checked: "success"}
]
};
},
methods: {
change(obj) {
var value = obj.value; // 改变后的值
var event = obj.event; // 当前操作对象
alert(value);
}
}
});
`

Props


`
/**
* 模式
*
* @type {String}
*
* @required false
*
* group bootstrap btn-group样式
* checkbox 复选框样式
*/
mode: {
type: String,
required: false,
default: 'group' // group|checkbox
},
/**
* 绑定数据
*
* @type {mixed}
*
* @required true
*/
value: {
type: null,
required: true,
default: 0
},
/**
* 选择数据
*
* @type {Array}
*
* @required true
*
* @example [
* {label: "Left", value: 1, checked: "primary"},
* {label: "Middle", value: 2, checked: "info"},
* {label: "Right", value: 3}
* ]
* label: 标签描述
* value: 标签值
* checked: 选中样式
*/
options: {
type: Array,
required: true
},
/**
* 样式设置
*
* @type {Object}
*
* @required false
*
* @example {checked: "success", unchecked: "secondary"}
* checked: 选中样式
* unchecked: 未选中样式
*
* bootstrap3 default|primary|success|info|warning|danger
* bootstrap4 primary|secondary|success|danger|warning|info|light|dark
*
* 自定义颜色 rgb(187, 153, 205)|red|#000000
*/
toggle: {
type: Object,
required: false,
default: () =>{
return { checked: "success", unchecked: "secondary" };
}
},
/**
* 尺寸
*
* @type {String}
*
* @required false
*
* @example ''|sm|lg
*/
size: {
type: String,
required: false,
default: ''
},
/**
* 是否可用
*
* @type {Boolean}
*
* @required false
*
* @example true|false
*/
disabled: {
type: Boolean,
required: false,
default: false
},
/**
* 改变前回调方法
*
* @type {Function}
*
* @required false
*
* @param value 改变后值
* @param event 当前对象
*/
before: {
type: Function,
required: false,
}
``