Switch 开关选择器

用于在打开和关闭状态之间进行切换。

基础使用

通过 v-model 属性绑定开关的选中状态，true 表示开，false 表示关。

vue

<template>
    <hi-switch v-model="isChecked"></hi-switch>
</template>

<script setup>
    import { ref } from "vue";

    // 开关状态
    const isChecked = ref(false);
</script>

禁用状态

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

vue

<template>
    <hi-switch v-model="isChecked" disabled></hi-switch>
</template>

加载状态

通过 loading 属性设置开关为加载状态，加载状态下开关不可点击。

vue

<template>
    <hi-switch v-model="isChecked" loading></hi-switch>
</template>

自定义 `on / off` 状态色

通过 offColor 和 onColor 属性来自定义开关关闭时和打开时的颜色。

vue

<template>
    <hi-switch v-model="isChecked" offColor="#FF9900" onColor="#FF0000"></hi-switch>
</template>

异步控制

需要异步控制开关时，可以使用 async 属性开启异步控制功能，此时点击开关时会触发 asyncChange 事件，在事件中手动处理开关状态。

vue

<template>
    <hi-switch v-model="isChecked" async @asyncChange="onAsyncChange"></hi-switch>
</template>

<script setup>
    import { ref } from "vue";

    // 开关状态
    const isChecked = ref(false);

    // 异步变更事件
    // nowValue: 当前状态
    function onAsyncChange(nowValue) {
        uni.showModal({
            title: "异步变更",
            content: "切换状态？",
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (confirm) isChecked.value = !nowValue;
            }
        });
    }
</script>

`off / on` 图标

通过 offIcon 设置关闭状态时的图标。
通过 onIcon 设置打开状态时的图标。

vue

<template>
    <hi-switch v-model="isChecked" offIcon="__jian" onIcon="__checked"></hi-switch>
</template>

`off / on` 文字

通过 offIcon 设置关闭状态时的文字。
通过 onIcon 设置打开状态时的文字。

vue

<template>
    <hi-switch v-model="isChecked" offText="关" onText="开"></hi-switch>
</template>

`off / on` 文字位置

默认 off / on 文字的位置在圆上，将 inside 属性设置为 true，可以将 off / on 文字放置在圆下，具体效果参考右侧演示。

vue

<template>
    <hi-switch v-model="isChecked" offText="关" onText="开" inside></hi-switch>
</template>

主题

为了方便使用，此组件支持设置主题，主题对应开关打开时的颜色（onColor）。

vue

<template>
    <hi-switch v-model="isChecked" offText="关" onText="开" theme="primary"></hi-switch>
    <hi-switch v-model="isChecked" offText="关" onText="开" theme="success"></hi-switch>
    <hi-switch v-model="isChecked" offText="关" onText="开" theme="warning"></hi-switch>
    <hi-switch v-model="isChecked" offText="关" onText="开" theme="error"></hi-switch>
    <hi-switch v-model="isChecked" offText="关" onText="开" theme="info"></hi-switch>
</template>

自定义加载图标颜色和大小

通过 loadingColor 设置加载图标颜色。
通过 loadingSize 设置加载图标大小。

vue

<template>
    <hi-switch v-model="isChecked" loading loadingColor="#ff0000" loadingSize="12px"></hi-switch>
</template>

自定义 `off/ on` 图标颜色和大小

通过 offIconColor 设置关闭状态时图标的颜色。
通过 offIconSize 设置关闭状态时图标的大小。
通过 onIconColor 设置开启状态时图标的颜色。
通过 onIconSize 设置开启状态时图标的大小。

vue

<template>
    <hi-switch
        v-model="isChecked"
        offIcon="__jian"
        onIcon="__checked"
        offIconSize="12px"
        offIconColor="red"
        onIconSize="12px"
        onIconColor="#FBC424"
        theme="success"
    ></hi-switch>
</template>

自定义 `off/ on` 文字颜色和大小

通过 offTextColor 设置关闭状态时文字的颜色。
通过 offTextFontSize 设置关闭状态时文字的大小。
通过 onTextColor 设置开启状态时文字的颜色。
通过 onTextFontSize 设置开启状态时文字的大小。

vue

<template>
    <hi-switch
        v-model="isChecked"
        offText="关"
        onText="开"
        offTextFontSize="15px"
        offTextColor="red"
        onTextFontSize="15px"
        onTextColor="#FBC424"
        theme="warning"
    ></hi-switch>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
`v-mode`	绑定的状态值	`Boolean`	`false`	`true`	-
`width`	组件宽度	`String`	-	-	-
`circleSize`	开关组件中圆的大小	`String`	`1.8em`	-	-
`distance`	开关组件中圆和组件之间的距离	`String`	`2px`	-	-
`disabled`	是否禁用	`Boolean`	`false`	`true`	-
`loading`	是否显示加载状态	`Boolean`	`false`	`true`	-
`loadingIcon`	加载图标名称	`String`	`__loading`	-	-
`loadingColor`	加载图标颜色	`String`	-	-	-
`loadingSize`	加载图标大小	`String`	-	-	-
`offColor`	关闭状态时的颜色	`String`	-	-	-
`onColor`	开启状态时的颜色	`String`	-	-	-
`async`	是否开启异步控制	`Boolean`	`false`	`true`	-
`offIcon`	关闭状态图标	`String`	-	-	-
`offIconColor`	关闭状态图标颜色	`String`	-	-	-
`offIconSize`	关闭状态图标大小	`String`	-	-	-
`onIcon`	开启状态图标	`String`	-	-	-
`onIconColor`	开启状态图标颜色	`String`	-	-	-
`onIconSize`	开启状态图标大小	`String`	-	-	-
`offText`	关闭状态文字	`String`	-	-	-
`offTextColor`	关闭状态文字颜色	`String`	-	-	-
`offTextFontSize`	关闭状态文字大小	`String`	-	-	-
`onText`	开启状态文字	`String`	-	-	-
`onTextColor`	开启状态文字颜色	`String`	-	-	-
`onTextFontSize`	开启状态文字大小	`String`	-	-	-
`inside`	文字是否在圆下方	`Boolean`	`false`	`true`	-
`theme`	主题	`String`	-	-	-
`circleBg`	圆的背景	`String`	-	-	-

Event

事件名	说明	回调参数	版本
`change`	状态改变事件	`status`: 最新状态值。	-
`asyncChange`	异步控制回调事件	`status`: 当前状态值。	-

样式变量

组件提供了以下样式变量，可以在使用时设置这些变量来修改组件的样式。

变量名	默认值	版本
`--hi-switch-align-items`	`center`	-
`--hi-switch-justify-content`	`space-between`	-
`--hi-switch-width`	`4em`	-
`--hi-switch-height`	`calc(var(--hi-switch-circle-size) + var(--hi-switch-distance) * 2)`	-
`--hi-switch-padding`	`0 8px`	-
`--hi-switch-border-radius`	`100em`	-
`--hi-switch-transition`	`0.3s`	-
`--hi-switch-node-background`	`var(--hi-background-element)`	-
`--hi-switch-node-border-radius`	`50%`	-
`--hi-switch-node-z-index`	`2`	-
`--hi-switch-node-transition`	`left 0.3s`	-
`--hi-switch-node-display`	`flex`	-
`--hi-switch-node-align-items`	`center`	-
`--hi-switch-node-justify-content`	`center`	-
`--hi-switch-icon-font-size`	`calc(var(--hi-switch-circle-size) * 0.6)`	-
`--hi-switch-icon-color`	`inherit`	-
`--hi-switch-loading-duration`	`1500ms`	-
`--hi-switch-loading-timing-function`	`linear`	-
`--hi-switch-loading-iteration-count`	`infinite`	-
`--hi-switch-loading-icon-font-size`	`calc(var(--hi-switch-circle-size) * 0.6)`	-
`--hi-switch-loading-icon-color`	`var(--hi-theme-primary)`	-
`--hi-switch-off-icon-color`	`var(--hi-switch-off-color, var(--hi-background-default))`	-
`--hi-switch-off-icon-font-size`	`calc(var(--hi-switch-circle-size) * 0.6)`	-
`--hi-switch-on-icon-color`	`var(--hi-switch-on-color, var(--hi-theme-primary))`	-
`--hi-switch-on-icon-font-size`	`calc(var(--hi-switch-circle-size) * 0.6)`	-
`--hi-switch-text-color`	`inherit`	-
`--hi-switch-text-font-size`	`calc(var(--hi-switch-circle-size) * 0.4)`	-
`--hi-switch-off-text-color`	`var(--hi-switch-off-color, var(--hi-background-default)) / var(--hi-switch-off-color, var(--hi-theme-primary))`	-
`--hi-switch-off-text-font-size`	`calc(var(--hi-switch-circle-size) * 0.4)`	-
`--hi-switch-on-text-color`	`var(--hi-switch-on-color, var(--hi-theme-primary)) / var(--hi-switch-on-color, var(--hi-background-default))`	-
`--hi-switch-on-text-font-size`	`calc(var(--hi-switch-circle-size) * 0.4)`	-
`--hi-switch-on-color`	`var(--hi-theme-primary)`	-
`--hi-switch-off-color`	`var(--hi-background-default)`	-

Switch 开关选择器 ​

基础使用 ​

禁用状态 ​

加载状态 ​

自定义 on / off 状态色 ​

异步控制 ​

off / on 图标 ​

off / on 文字 ​

off / on 文字位置 ​

主题 ​

自定义加载图标颜色和大小 ​

自定义 off/ on 图标颜色和大小 ​

自定义 off/ on 文字颜色和大小 ​

Props ​

Event ​

样式变量 ​