Switch 开关

示例

尺寸

可选的 ui 属性值:xs / s / m

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-switch
      v-model="disabled"
      ui="xs"
    >
      Disabled
    </veui-switch>
  </section>
  <section>
    <veui-switch
      v-model="on"
      :disabled="disabled"
    >
      Medium size
    </veui-switch>
    <veui-switch
      v-model="on"
      :disabled="disabled"
      ui="s"
    >
      Small size
    </veui-switch>
    <veui-switch
      v-model="on"
      :disabled="disabled"
      ui="xs"
    >
      Extra small size
    </veui-switch>
  </section>
</article>
</template>

<script>
import { Switch } from 'veui'

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

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}

.veui-switch {
  margin-right: 30px;
}
</style>

值设定

可以通过设置 true-valuefalse-value 来修改打开、关闭状态下 v-model 的值。

Status: On

在 GitHub 上编辑此页编辑
<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=-

预设样式。

描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
checkedbooleanfalse

.sync

是否处于打开状态。

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

插槽

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

事件

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

v-model

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

此外,Switch 支持如下的原生事件:

auxclickclickcontextmenudblclickmousedownmouseentermouseleavemousemovemouseovermouseoutmouseupselectwheelkeydownkeypresskeyupfocusblurfocusinfocusout

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

在 GitHub 上编辑此页编辑