Switch 开关

Switch 开关

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

基本用法

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

<el-switch  v-model="value"  active-color="#13ce66"  inactive-color="#ff4949"></el-switch><script>
export default {
  data() {
    return { value: true };
  },
};
</script>

文字描述

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

<el-switch  v-model="value1"  active-text="按月付费"  inactive-text="按年付费"></el-switch><el-switch  style="display: block"  v-model="value2"  active-color="#13ce66"  inactive-color="#ff4949"  active-text="按月付费"  inactive-text="按年付费"></el-switch><script>
export default {
  data() {
    return { value1: true, value2: true };
  },
};
</script>

扩展的 value 类型

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

<el-tooltip :content="'Switch value: ' + value" placement="top">  
  <el-switch   v-model="value"   active-color="#13ce66"   inactive-color="#ff4949"   active-value="100"   inactive-value="0">  
  </el-switch>
</el-tooltip>
<script>
export default {
  data() {
    return { value: "100" };
  },
};
</script>

禁用状态

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

<el-switch  v-model="value1"  disabled></el-switch><el-switch  v-model="value2"  disabled></el-switch><script>
export default {
  data() {
    return { value1: true, value2: false };
  },
};
</script>

Attributes

Events

Methods