Vue.js的可访问的切换开关组件–Toggles

Vue.js的可访问的切换开关组件–Toggles
插件名称 vue-toggles
版本号 v1.1.1
发布时间 2020年6月3日
插件作者 juliandreas

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

名称类型默认描述
value Boolean false切换按钮的初始状态
disabled Boolean false切换不响应鼠标或键盘事件
reverse Boolean false反向切换到从右到左
height [String, Number] 25拨入高度 px
width [String, Number] 75切换宽度 px
CheckedText String null选中切换后的可选文本
uncheckedText String null取消选中时的可选文本
checkedBg String #5850ec选中切换后的背景色
uncheckedBg String #939393取消切换时的背景色
checkedColor String #ffffff选中切换后的文本颜色
uncheckedColor String #ffffff取消选中切换开关时的文本颜色
dotColor String #ffffff切换点的颜色
fontSize [String, Number] 12字体大小 px
fontWeight [String, Number] normal字型粗细