Vue.js 3的轻量级切换开关

一个轻量级的可定制的切换开关，为Vue.js 2和Vue.js 3应用程序提供开/关标签。

如何使用它。

1.导入并注册该组件。

<style src="@vueform/toggle/themes/default.css"></style>
import Toggle from '@vueform/toggle'

export default {
  components: {
    Toggle,
  }
}

2.2.将切换开关组件添加到应用模板中。

<Toggle v-model="value" />

3.3.用以下道具配置切换开关。

id: {
  type: [String, Number],
  required: false,
  default: 'toggle'
},
name: {
  type: [String, Number],
  required: false,
  default: 'toggle'
},
disabled: {
  type: Boolean,
  required: false,
  default: false,
},
required: {
  type: Boolean,
  required: false,
  default: false,
},
falseValue: {
  type: [String, Number, Boolean],
  required: false,
  default: false,
},
trueValue: {
  type: [String, Number, Boolean],
  required: false,
  default: true,
},
onLabel: {
  type: [String, Object],
  required: false,
  default: ''
},
offLabel: {
  type: [String, Object],
  required: false,
  default: ''
},
classes: {
  type: Object,
  required: false,
  default: () => ({})
},
labelledby: {
  type: String,
  required: false,
},
describedby: {
  type: String,
  required: false,
},

预览。

更新日志。

v2.1.2 (09/26/2022)

• A11y的改进。

v2.1.1 (07/11/2022)

• 兼容Vue.js 2.7

v2.0.2 (05/11/2022)

• 基于CSS var的高度切换。

v2.0.0 (06/03/2021)

• 删除了宽度、高度、速度、颜色、字体大小属性和关闭、开启槽。
• 完全更新了默认样式和类名。

v1.1.0 (01/06/2020)

• 重组了颜色属性

The postLightweight Toggle Switches For Vue.js 3appeared first onVue Script.