Switch 开关

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

代码演示

基础用法

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

查看代码 < />


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

开

文字描述

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

查看代码 < />


<template>
  <w-switch
    v-model="value1"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="开"
    inactive-text="关">
  </w-switch>
</template>
<script>
export default {
  data () {
    return {
      value1: true,
    },
  }
}
</script>

是

禁用状态

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

查看代码 < />


<template>
  <w-switch
    v-model="value1"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="是"
    inactive-text="否"
    disabled>
  </w-switch>
</template>
<script>
export default {
  data () {
    return {
      value1: true,
    },
  }
}
</script>

开关状态拦截

适用于需要异步修改开关状态的场景, 通过before-change参数来控制状态是否需要被改变.

查看代码 < />


<template>
  <w-switch
    v-model="value1"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :before-change="interceptorHandler"
  >
  </w-switch>
</template>
<script>
export default {
  data () {
    return {
      value1: true,
    },
  },
  methods: {
    interceptorHandler() {
      return new Promise(resolve => {
        setTimeout(() => {
          const result = Math.random(1) > 0.5 ? true : false;
          this.$message({
            message: result ? "通过拦截" : "发生错误",
            type: result ? "success" : "error"
          });
          // resolve true or false
          resolve(result);
        }, 1000);
      });
    }
  }
}
</script>

API

Attributes

参数	说明	类型	可选值	默认值	Version
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 `active-text`	String	—	—
active-text	switch 打开时的文字描述	String	—	—
active-value	switch 打开时的值	Boolean / String / Number	—	true
active-color	switch 打开时的背景色	String	—	#409EFF
before-change	当开关状态变化之前触发的回调函数	Function	—	—	v1.7.2
disabled	是否禁用	Boolean	—	false
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`	String	—	—
inactive-text	switch 关闭时的文字描述	String	—	—
inactive-value	switch 关闭时的值	Boolean / String / Number	—	false
inactive-color	switch 关闭时的背景色	String	—	#C0CCDA
name	switch 对应的 name 属性	String	—	—
value / v-model	绑定值	Boolean / String / Number	—	—
width	switch 的宽度（像素）	Number	—	40

Events

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

Methods

方法名	说明	参数	Version
focus	使 Switch 获取焦点	—

贡献者

类型	参与者
设计者	UED视觉组
维护者	UED前端组

# Switch 开关

# 代码演示

基础用法

查看代码 < />

文字描述

查看代码 < />

禁用状态

查看代码 < />

开关状态拦截

查看代码 < />

# API

# Attributes

# Events

# Methods

# 贡献者

Switch 开关

代码演示

API

Attributes

Events

Methods

贡献者