Switch 开关

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

基础用法

绑定 v-model 到一个 Boolean 类型的变量。可以使用 --px-switch-on-color 属性与 --px-switch-off-color 属性来设置开关的背景色, --px-switch-on-border-color、--px-switch-off-border-color 属性设置开关边框颜色, --px-switch-on-action-color、--px-switch-off-action-color 属性设置滑块颜色。

<template>
  <px-switch v-model="value1" />
  <px-switch
    v-model="value2"
    class="ml-20"
    style="
      --px-switch-on-color: #13ce66;
      --px-switch-on-border-color: #13ce66;
      --px-switch-off-color: #ff4949;
      --px-switch-off-border-color: #ff4949;
      --px-switch-off-action-color: #ffffff;
    "
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

尺寸

通过 size 改变尺寸, 可选值为 small、default、large

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

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(true)
</script>

文字描述​

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

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

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

<script setup lang="ts">
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>

自定义图标

TIP

使用 inactive-icon 和 active-icon 属性来添加图标。这里的图标是滑块外图标, 注意区分。Pixel UI 提供了一组图标, 您可以在 icon component 查看。

使用 inactive-icon 和 active-icon 属性来添加图标。使用 inline-prompt 属性来控制图标显示在点内。

<template>
  <px-switch v-model="value1" active-icon="check" inactive-icon="times" />
  <br />
  <px-switch
    v-model="value2"
    class="mt-20 ml-20"
    inline-prompt
    active-icon="check"
    inactive-icon="times"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

自定义动作图标

使用 inactive-action-icon 和 active-action-icon 属性来添加图标。

<template>
  <px-switch
    v-model="value1"
    active-action-icon="eye"
    inactive-action-icon="eye-cross"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
</script>

扩展的 value 类型​

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

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

<script lang="ts" setup>
import { ref } from 'vue'

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

禁用状态​

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

<template>
  <px-switch v-model="value1" disabled />
  <px-switch v-model="value2" class="ml-20" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

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

加载状态​

设置 loading 属性, 接受一个 Boolean, 设置 true 即加载中状态。

<template>
  <px-switch v-model="value1" loading />
  <px-switch v-model="value2" loading class="ml-20" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

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

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Switch API

Props

Name	Description	Type	Default
modelValue	绑定值, 必须等于 active-value 或 inactive-value, 默认为 Boolean 类型	boolean | string | number	false
disabled	是否禁用	boolean	false
loading	是否显示加载中	boolean	false
size	Switch 尺寸	enum	-
inlinePrompt	无论图标或文本是否显示在点内, 只会呈现文本的第一个字符	boolean	false
activeIcon	开启状态的图标, 覆盖 activeText	string	-
inactiveIcon	关闭状态的图标, 覆盖 inactiveText	string	-
activeActionIcon	开启状态内部图标	string	-
inactiveActionIcon	关闭状态内部图标	string	-
activeText	开启状态的文字	string	-
inactiveText	关闭状态的文字	string	-
activeValue	Switch 状态为 on 时的值	string | number | boolean	true
inactiveValue	Switch 状态为 off 时的值	string | number | boolean	false
name	Switch 对应的 name 属性	string	-
id	Switch 对应的 id 属性	string	-

Events

Name	Description	Type
update:modelValue	绑定值发生改变时触发	function
change	绑定值发生改变时触发	function

Expose

Name	Description	Type
focus	获取焦点	function
checked	获取当前是否选中	computedref