Switch 开关

用于在打开和关闭状态之间进行切换。

代码演示

基础用法

通过点击按钮来控制开启和关闭状态，v-model绑定开关的开启状态。

<hd-switch v-model="open"></hd-switch>

export default {
  data() {
    return {
      open: false
    }
  }
}

禁用状态

通过disabled属性控制按钮是否可以点击，true时不可点击。

<hd-switch v-model="open" :disabled="disabled"></hd-switch>

export default {
  data() {
    return {
      open: false,
      disabled: true
    }
  }
}

自定义大小

通过size属性自定义开关的大小，单位px，默认24。

<hd-switch v-model="open" size="30"></hd-switch>

自定义颜色

activeColor属性表示打开时开关的背景颜色，默认值是#2979ff；inactiveColor属性表示关闭时开关的背景颜色，默认值是#fffffff。

<hd-switch v-model="open" activeColor="#ee0a24" inactiveColor="#dcdee0"></hd-switch>

圆点与外边框距离

通过space控制圆点与外边框之间的距离，默认0。

<hd-switch v-model="open" space="2"></hd-switch>

Props

Name	Description	Type	Required	Default
disabled	是否禁用	Boolean	false	默认值是：false
size	开关尺寸，单位px	String / Number	false	默认值是：24
activeColor	打开时的背景颜色	String	false	默认值是：#2979ff
inactiveColor	关闭时的背景颜色	String	false	默认值是：#fffffff
value	通过v-model双向绑定的值	Boolean / String / Number	false	默认值是：false
activeValue	打开选择器时的值	String / Number / Boolean	false	默认值是：true
inactiveValue	关闭选择器时的值	String / Number / Boolean	false	默认值是：false
asyncChange	是否开启异步变更，开启后需要手动控制输入值	Boolean	false	默认值是：false
space	圆点与外边框的距离	String / Number	false	默认值是：0

Events

Event Name	Description	Parameters
input	选择器状态发生变化时触发	value：选择器的值，建议通过v-model双向绑定输入值，而不是监听此事件的形式
change	选中状态变更	value：打开时为active-value值，关闭时为inactive-value值