vform-element

Switch 开关

基础用法

绑定 v-model 到一个 Boolean 类型的变量。 可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色。

尺寸

使用 size 设置大小

文字描述

使用 active-text 属性与 inactive-text 属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。

使用 active-text 属性与 inactive-text 属性来设置开关的文字描述。

显示自定义图标

使用 inactive-icon 和 active-icon 属性来添加图标。 使用 inline-prompt 属性来控制图标显示在点内。

扩展的 value 类型

设置 active-value 和 inactive-value 属性，接受 Boolean, String 或 Number 类型的值。 接受Boolean, String或 Number 类型的值。

禁用状态

设置 disabled 属性，接受一个 Boolean ，设置 true 即可禁用。

加载状态

设置 loading 属性，接受一个 Boolean ，设置 true 即加载中状态。

阻止切换

设置 beforeChange 属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。

属性

Switch 完全继承了 ElSwitch的属性 您可以从下面的链接里找到相关文档

typescript声明 

export type VSwitchProps = VueProps<typeof ElSwitch>
export interface VSwitchItem<T extends object, Key extends DeepKey<T> = DeepKey<T>> extends VBaseItem<T, Key> {
  /**
   * 类型 switch
   */
  /**
   * `element-plus switch`的属性
   */
  props?: VPropDef<T, VSwitchProps>
  transfer?: VTransfer<Into<T, Key>, string | number>
}
1
2
3
4
5
6
7
8
9
10
11