Switch 开关

示例

尺寸

可选的 ui 属性值：small/large。

<template>
<article>
  <section>
    <veui-switch v-model="readonly">
      Read-only
    </veui-switch>
    <veui-switch v-model="disabled">
      Disabled
    </veui-switch>
  </section>
  <section>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
      ui="large"
    >
      Large size
    </veui-switch>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
    >
      Normal size
    </veui-switch>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
      ui="small"
    >
      Small size
    </veui-switch>
  </section>
</article>
</template>

<script>
import { Switch } from 'veui'

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      on: false,
      readonly: false,
      disabled: false
    }
  }
}
</script>

值设定

可以通过设置 true-value 和 false-value 来修改打开、关闭状态下 model 属性（v-model）的值。

Status: On

<template>
<article>
  <veui-switch
    v-model="status"
    true-value="ON"
    false-value="OFF"
  >
    Bluetooth
  </veui-switch>
  <p>Status: {{ statusMap[status] }}</p>
</article>
</template>

<script>
import { Switch } from 'veui'

const STATUS_MAP = {
  ON: 'On',
  OFF: 'Off'
}

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      status: 'ON',
      statusMap: STATUS_MAP
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
small小尺寸样式。
large大尺寸样式。
model*-

v-model

当前状态的值。打开状态为 true-value 对应值，关闭状态为 false-value 对应值。

checkedbooleanfalse

.sync

是否处于打开状态。

true-value*true打开状态对应的值。
false-value*false关闭状态对应的值。
disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。

插槽

名称描述
default开关的描述文本，点击时会切换选择状态。无默认内容。

事件

名称描述
change用户切换打开状态时触发，回调参数为 (checked: boolean)。checked 表示当前是否打开。
input

v-model

打开状态变化后触发，回调参数为 (val: *)。val 为当前 model 属性的值。与 change 事件不同，input 事件在数据操作导致状态变化时也会触发。

此外，Switch 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

回调参数均为相应的原生事件对象。