Switch 开关组件

常用的开关组件。

基础用法

绑定 v-model 到一个 Boolean 类型的变量。可以使用 --my-switch-on-color 属性与 --my-switch-off-color 属性来设置开关的背景色。

<template>
  <my-switch v-model="value1" />
  <my-switch
    v-model="value2"
    style="--my-switch-on-color: #13ce66; --my-switch-off-color: #ff4949"
  />
</template>

<script setup>
  import { ref } from 'vue'
  const value1 = ref(true)
  const value2 = ref(true)
</script>

尺寸

Open

<template>
  <my-switch
    v-model="value"
    size="large"
    active-text="Open"
    inactive-text="Close"
  />
  <br />
  <my-switch
    v-model="value"
    active-text="Open"
    inactive-text="Close"
  />
  <br />
  <my-switch
    v-model="value"
    size="small"
    active-text="Open"
    inactive-text="Close"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const value = ref(true)
</script>

文字描述

使用active-text属性与inactive-text属性来设置开关的文字描述。使用 inline-prompt 属性来控制文本是否显示在点内。

使用active-text属性与inactive-text属性来设置开关的文字描述。

<template>
  <my-switch
    v-model="value1"
    class="mb-2"
    active-text="Pay by month"
    inactive-text="Pay by year"
  />
  <br />
  <my-switch
    v-model="value2"
    class="mb-2"
    style="--my-switch-on-color: #13ce66; --my-switch-off-color: #ff4949"
    active-text="Pay by month"
    inactive-text="Pay by year"
  />
  <br />
  <my-switch
    v-model="value3"
    inline-prompt
    active-text="是"
    inactive-text="否"
  />
  <my-switch
    v-model="value4"
    class="ml-2"
    inline-prompt
    style="--my-switch-on-color: #13ce66; --my-switch-off-color: #ff4949"
    active-text="Y"
    inactive-text="N"
  />
  <my-switch
    v-model="value6"
    class="ml-2"
    width="30"
    inline-prompt
    active-text="超出省略"
    inactive-text="超出省略"
  />
  <my-switch
    v-model="value5"
    class="ml-2"
    inline-prompt
    style="--my-switch-on-color: #13ce66; --my-switch-off-color: #ff4949"
    active-text="完整展示多个内容"
    inactive-text="多个内容"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const value1 = ref(true)
  const value2 = ref(true)
  const value3 = ref(true)
  const value4 = ref(true)
  const value5 = ref(true)
  const value6 = ref(true)
</script>

<style scoped>
  .ml-2 {
    margin-left: 8px;
  }
</style>

扩展的 value 类型

你可以设置 active-value 和 inactive-value 属性，它们接受 Boolean、String 或 Number 类型的值。

<template>
  <my-tooltip
    :content="'Switch value: ' + value"
    placement="top"
  >
    <my-switch
      v-model="value"
      style="--my-switch-on-color: #13ce66; --my-switch-off-color: #ff4949"
      active-value="100"
      inactive-value="0"
    />
  </my-tooltip>
</template>

<script setup>
  import { ref } from 'vue'

  const value = ref('100')
</script>

禁用状态

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

<template>
  <my-switch
    v-model="value1"
    disabled
  />
  <my-switch
    v-model="value2"
    class="ml-2"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const value1 = ref(true)
  const value2 = ref(true)
</script>

<style scoped>
  .ml-2 {
    margin-left: 10px;
  }
</style>

API

Attributes

属性名	说明	类型	Default
modelValue	开关的值	`boolean \ string \ number`	—
activeText	开启时的文字描述	`string`	—
inactiveText	关闭时的文字描述	`string`	—
activeValue	开启时对应的值	`boolean \ string \ number`	`true`
inactiveValue	关闭时对应的值	`boolean \ string \ number`	`false`
inlinePrompt	是否显示文字提示	`boolean`	—
size	开关的尺寸	`small \ large`	—
width	开关的宽度	`number \ string`	—
disabled	是否禁用开关	`boolean`	—
name	开关的原生 `name` 属性	`string`	—
id	开关的原生 `id` 属性	`string`	—

Events

事件名	说明	Type
update:modelValue	当开关值改变时触发	`(value: boolean \| string \| number) => void`
change	当开关值改变时触发	`(value: boolean \| string \| number) => void`

Switch 开关组件 ​

基础用法 ​

尺寸 ​

文字描述 ​

扩展的 value 类型 ​

禁用状态 ​

API ​

Attributes ​

Events ​