VEUI

VEUI on GitHub
Play!中文

Switch

Examples

Size variants

Available ui prop values: xs / s / m.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-switch
      v-model="disabled"
      class="switch"
      ui="xs"
    >
      Disabled
    </veui-switch>
  </section>
  <section>
    <veui-switch
      v-model="on"
      class="switch"
      :disabled="disabled"
    >
      Medium size
    </veui-switch>
    <veui-switch
      v-model="on"
      class="switch"
      :disabled="disabled"
      ui="s"
    >
      Small size
    </veui-switch>
    <veui-switch
      v-model="on"
      class="switch"
      :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;
}

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

True/false values

You can modify the v-model value when the switch is on or off by setting the true-value and false-value props.

Status: On

Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
uistring-

Preset styles.

ValueDescription
xsExtra small size.
sSmall size.
mMedium size.
checkedbooleanfalse

.sync

Whether the switch is on.

true-value*trueThe value corresponding to the on state.
false-value*falseThe value corresponding to the off state.
disabledbooleanfalseWhether the switch is disabled.
readonlybooleanfalseWhether the switch is read-only.
loadingbooleanfalseWhether the switch is in loading state.

Slots

NameDescription
defaultThe text that describes the switch. Clicking on it will toggle the switch. No default content.

Events

NameDescription
changeTriggered when the user toggles the switch. The callback parameter is (checked: boolean), where checked indicates whether the switch is currently on.
inputTriggered when the switch is toggled. The callback parameter is (val: *), where val is the current v-model value. Unlike the change event, the input event is also triggered when the state changes due to data manipulation.

In addition, Switch supports the following native events:

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

The callback parameter for all events is the corresponding native event object.

Edit this page on GitHubEdit
© Baidu, Inc. 2024