# Switch 开关

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

# 基本用法

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

<template>
  <mist-switch
    v-model="value"
    active-color="#30e3ca"
    inactive-color="#e84545"
  />
</template>
<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>
Expand Copy

# 禁用


设置disabled开启禁用状态

<template>
  <mist-switch
    disabled
    v-model="value"
  />
  <br/>
  <mist-switch
    v-model="value3"
    @change="handleSwitch"
  />
</template>
<script>
  export default {
    data() {
      return {
        value: true,
        value3: false
      }
    },
    methods:{
      handleSwitch(value){
        console.log(value)
      }
    }
  };
</script>
Expand Copy

# Event

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