Switch 开关

开关选择器。

何时使用

• 需要表示开关状态/两种状态之间的切换时；
• 和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

代码演示

简单

最简单的用法。

<template>
  <v-switch v-model="checked"></v-switch>
</template>
<script>
  export default {
    data: ()=> ({
      checked: true
    })
  };
</script>

不可用

Switch 失效状态。

<template>
  <v-switch :disabled="disabled"></v-switch>
  <br><br>
  <v-button type="primary" @click="_toogle">Toggle disabled</v-button>
</template>
<script>
  export default {
    data: ()=> ({
      disabled: false
    }),
    methods: {
      _toogle() {
        this.disabled = !this.disabled
      }
    }
  };
</script>

文字和图标

带有文字和图标。

<v-switch> 
  <span slot="checkedChildren">开</span>
  <span slot="unCheckedChildren">关</span>
</v-switch>
<br><br>
<v-switch> 
  <span slot="checkedChildren">
    <i class="anticon anticon-check"></i>
  </span>
  <span slot="unCheckedChildren">
    <i class="anticon anticon-cross"></i>
  </span>
</v-switch>

两种大小

size='small' 表示小号开关

<v-switch></v-switch>
<br>
<v-switch size="small"></v-switch>

自定义状态值

属性名称：true-value false-value以下例子定义：选中时为 1 ，未选中时为 0组件当前状态为选中

<template>
  <v-switch v-model="checkStatus" :true-value="1" :false-value="0"></v-switch>
  <v-button @click="getStatus" size="small" type="primary">获取状态码</v-button>
</template>
<script>
  export default {
    data: ()=> ({
      checkStatus: 1
    }),
    methods: {
      getStatus(){
        this.$message.info("当前状态码为：" + this.checkStatus);
      }
    }
  };
</script>

API

Switch Props