Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基本用法

• 绑定v-model到一个Boolean类型的变量。

<db-switch v-model="value">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

Expand Copy Copy

自定义背景

• 可以使用active-color属性与inactive-color属性来设置开关的背景色。

<db-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

Expand Copy Copy

设置icon

• 通过设置mode为icon来设置icon模式

• active-icon 可以设置开的时候icon, inactive-icon可以设置关闭的时候icon

<db-switch v-model="value" mode="icon">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

Expand Copy Copy

设置文本

• 通过设置mode为text来设置text模式

• active-text 可以设置开的时候text, inactive-text可以设置关闭的时候text

<db-switch v-model="value" mode="text">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

Expand Copy Copy

自定义开关取值

• active-value 可以设置开的时候值, inactive-value可以设置关闭的时候值

<db-switch v-model="value"  active-value="1" inactive-value="2">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: "1"
      }
    }
  };
</script>

Expand Copy Copy

禁用状态

• 通过设置disabled为true禁用开关

<db-switch v-model="value" disabled>
</db-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

Expand Copy Copy

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA

Events

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值