# Switch 开关

# Switch 概述

在两种状态间切换时用到的开关选择器。

# Switch 代码演示

# 基本

基本用法，状态切换时会触发事件.

false

<template>
  <div>
    <h-switch v-model="switch1" @on-change="change"></h-switch>
    {{ switch1 }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      switch1: false,
    };
  },
  methods: {
    change(status) {
      this.$hMessage.info(`开关状态：${status}`);
    },
  },
};
</script>

复制代码

# 尺寸

设置size为 large 或 small ，使用大号和小号的开关。

关

<template>
  <div>
    <h-switch size="large">
      <div slot="open">开</div>
      <div slot="close">关</div>
    </h-switch>
    <br /><br />
    <h-switch></h-switch>
    <br /><br />
    <h-switch size="small"></h-switch>
  </div>
</template>

复制代码

# 文字和图标

自定义内容，建议如果使用2个汉字，将开关尺寸设置为 large。

关

关闭

OFF

<template>
  <div>
    <h-switch>
      <span slot="open">开</span>
      <span slot="close">关</span>
    </h-switch>
    <br /><br />
    <h-switch>
      <h-icon name="right" slot="open"></h-icon>
      <h-icon name="close" slot="close"></h-icon>
    </h-switch>
    <br /><br />
    <h-switch size="large">
      <span slot="open">开启</span>
      <span slot="close">关闭</span>
    </h-switch>
    <br /><br />
    <h-switch size="large">
      <span slot="open">ON</span>
      <span slot="close">OFF</span>
    </h-switch>
  </div>
</template>

复制代码

# 不可用

禁用开关。

<template>
  <div slot="demo">
    <h-switch :disabled="disabled"></h-switch>
    <br /><br />
    <h-button type="primary" @click="disabled = !disabled"
      >Toggle Disabled: {{ this.disabled }}</h-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

复制代码

# 自定义大小

通过width和height自定义开关的宽高。

<template>
  <div>
    <h-switch @on-change="change" width="80" height="40">
      <!--  <div slot="open">开</div>
      <div slot="close">关</div> -->
    </h-switch>
    <h-switch @on-change="change" width="60" height="40"></h-switch>
  </div>
</template>
<script>
export default {
  methods: {
    change(status) {
      this.$hMessage.info(`开关状态：${status}`);
    },
  },
};
</script>

复制代码

# Switch API

# Switch props

属性	说明	类型	默认值
value	指定当前是否选中，可以使用 v-model 双向绑定数据	Boolean	false
size	开关的尺寸，可选值为 `large`、`small` 或者不写。建议开关如果使用了2个汉字的文字，使用 `large`。	String	-
disabled	禁用开关	Boolean	false
width	自定义宽度（不推荐添加内容）	String, Number	48
height	自定义高度（不推荐添加内容）	String, Number	24
true-value	选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	true
false-value	没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	false
true-color	自定义正确背景色（须与自定义错误背景色同时设置）	String	-
false-color	自定义错误背景色（须与自定义正确背景色同时设置）	String	-

# Switch events

事件名	说明	返回值
on-change	开关变化时触发，返回当前的状态	true \| false
on-focus	开关聚焦时触发，返回当前的事件	event
on-blur	开关失焦时触发，返回当前的事件	event

# Switch slot

名称	说明
open	自定义显示打开时的内容
close	自定义显示关闭时的内容