一个Vue.js组件，以一种简单的方式创建可自定义的，完全可访问的切换开关。

升级日志：

v1.1.1（03/21/2020）

• 如果一个以上的单词，解决换行问题

v1.1.0 (08/04/2020)

• SSR的支持

v1.0.4 (07/20/2020)

• 更新

v1.0.3（07/13/2020）

• 修复一些CSS问题

v1.0.2（06/28/2020）

• 更新资料

安装和下载：

# NPM
$ npm install vue-toggles --save

如何使用它：

1.导入组件。

import Vue from 'vue';
import VueToggles from 'vue-toggles';

2.注册组件。

Vue.component('VueToggles', VueToggles);

3.将<VueToggles />组件添加到模板。

<VueToggles
  @click="value = !value"
  :value="value"
/>

4.使用以下 props 配置开关。

value: {
  type: Boolean,
  default: false,
},
disabled: {
  type: Boolean,
  default: false,
},
reverse: {
  type: Boolean,
  default: false,
},
checkedText: {
  type: String,
  default: null,
},
uncheckedText: {
  type: String,
  default: null,
},
width: {
  type: [Number, String],
  default: 75,
},
height: {
  type: [Number, String],
  default: 25,
},
uncheckedBg: {
  type: String,
  default: '#939393',
},
checkedBg: {
  type: String,
  default: '#5850ec',
},
dotColor: {
  type: String,
  default: '#fff',
},
fontSize: {
  type: [Number, String],
  default: '12',
},
checkedColor: {
  type: String,
  default: '#fff',
},
uncheckedColor: {
  type: String,
  default: '#fff',
},
fontWeight: {
  type: [Number, String],
  default: 'normal',
},

选项：

您还可以添加更多Prope来自定义颜色和宽度/高度之类的东西。

<VueToggles
  @click="value = !value"
  :value="value"
  height="30"
  width="90"
  checkedText="On"
  uncheckedText="Off"
  checkedBg="#b4d455"
  uncheckedBg="lightgrey"
/>

Properties