Honeycomb Design

# 开关 Switch

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

# 基础用法

基础用法

绑定v-model到一个Boolean类型的变量, size可设置开关的大小

<title>基础用法</title>
<describe>绑定v-model到一个Boolean类型的变量, size可设置开关的大小</describe>
<template>
  <hc-switch v-model="value"> </hc-switch>
  <span style="margin-right: 10px"></span>
  <hc-switch v-model="value" size="mini"> </hc-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>

# 自定义选中颜色

自定义选中颜色

可以使用checked-color属性与unchecked-color属性来设置开关的背景色设置打开和关闭的颜色

<title>自定义选中颜色</title>
<describe>可以使用checked-color属性与unchecked-color属性来设置开关的背景色设置打开和关闭的颜色</describe>
<template>
  <hc-switch v-model="value" checked-color="#13ce66" unchecked-color="#ff4949"> </hc-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>

# 扩展的 value 类型

扩展的 value 类型

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

<title>扩展的 value 类型</title>
<describe>设置checked-value和unchecked-value属性，接受Boolean, String或Number类型的值。</describe>
<template>
  <hc-switch 
    v-model="value1" 
    :checked-value="1"
    :unchecked-value="0"
    @change="handleChange"
  >
  </hc-switch>
</template>
<script>
  export default {
    data() {
      return {
        value1: 1,
        value2: 'off'
      };
    },
    methods: {
      handleChange: function(e) {
        console.log(e)
      }
    }
  };
</script>

# 禁用状态

禁用

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

<title>禁用</title>
<describe>设置disabled属性，接受一个Boolean，设置true即可禁用。</describe>
<template>
  <hc-switch v-model="value" disabled> </hc-switch>
  <span style="margin-right: 10px"></span>
  <hc-switch v-model="value1" disabled> </hc-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
        value1: false
      };
    },
  };
</script>

# 属性及事件

# HcSwitch 属性

属性 说明 类型 可选值 默认值
value 当前输入的值，可配合 v-model 使用 string / number / boolean -- --
size 开关的大小 string mini / small small
checked-value 选中时的值 string / number / boolean -- true
unchecked-value 未选中时的值 string / number / boolean -- false
checked-color 选中时的开关颜色 string -- --
unchecked-color 未选中时的开关颜色 string -- --
disabled 是否禁用 boolean -- false

# HcSwitch 事件

事件 说明 回调参数
change 值改变事件 event.value：当前输入值
focus 获取焦点时触发事件 event
blur 失去焦点时触发事件 event

← 下拉框 Select →