介绍

用于打开/关闭两种状态间的切换。

引入

import Switch from 'sard-uniapp/components/switch/switch.vue'

代码演示

基础使用

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

vue lang="ts"

<template>
  <sar-switch v-model="checked" @change="onChange" />
</template>

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

const checked = ref(true)

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue lang="js"

<template>
  <sar-switch v-model="checked" @change="onChange" />
</template>

<script setup lang="js">
import { ref } from "vue";
const checked = ref(true);
const onChange = (value) => {
  console.log("change", value);
};
</script>

自定义尺寸

使用 size 属性设置开关尺寸。

vue lang="ts"

<template>
  <sar-switch v-model="checked" size="48rpx" />
</template>

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

const checked = ref(true)
</script>

vue lang="js"

<template>
  <sar-switch v-model="checked" size="48rpx" />
</template>

<script setup lang="js">
import { ref } from "vue";
const checked = ref(true);
</script>

自定义颜色

使用 checkedColor 属性设置打开时的颜色，使用 uncheckedColor 属性设置关闭时的颜色。

vue lang="ts"

<template>
  <sar-switch v-model="checked" checked-color="var(--sar-red)" />
</template>

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

const checked = ref(true)
</script>

vue lang="js"

<template>
  <sar-switch v-model="checked" checked-color="var(--sar-red)" />
</template>

<script setup lang="js">
import { ref } from "vue";
const checked = ref(true);
</script>

不同状态的值

可以设置 checkedValue 和 uncheckedValue 属性代替默认的 true 和 false。

vue lang="ts"

<template>
  <sar-switch v-model="value" checked-value="on" unchecked-value="off" />
  <view>{{ value }}</view>
</template>

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

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

vue lang="js"

<template>
  <sar-switch v-model="value" checked-value="on" unchecked-value="off" />
  <view>{{ value }}</view>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("on");
</script>

只读和禁用

只读或禁用时不可操作。

<template>
  <doc-title>只读</doc-title>
  <sar-switch readonly />
  <sar-switch :model-value="true" readonly class="ml-10" />

  <doc-title>禁用</doc-title>
  <sar-switch disabled />
  <sar-switch :model-value="true" disabled class="ml-10" />
</template>

加载状态

当提供 beforeUpdate 函数，会在 fulfilled 状态后才切换，期间显示加载状态。

vue lang="ts"

<template>
  <sar-switch v-model="checked" :before-update="beforeUpdate" />
</template>

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

const checked = ref(true)

const beforeUpdate = (value: boolean) => {
  console.log(value)
  return new Promise((resolve) => {
    setTimeout(resolve, 1000)
  })
}
</script>

vue lang="js"

<template>
  <sar-switch v-model="checked" :before-update="beforeUpdate" />
</template>

<script setup lang="js">
import { ref } from "vue";
const checked = ref(true);
const beforeUpdate = (value) => {
  console.log(value);
  return new Promise((resolve) => {
    setTimeout(resolve, 1e3);
  });
};
</script>

API

SwitchProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
model-value (v-model)	开关选中状态	any	-
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
loading (v-model)	加载状态	boolean	-
size	开关大小	string	-
checked-color	开启时的颜色	string	-
unchecked-color	关闭时的颜色	string	-
checked-value	开启时的值	any	true
unchecked-value	关闭时的值	any	false
before-update	用于异步切换	(value: any) => Promise\<any>	-
validate-event	是否触发表单验证	boolean	true

SwitchEmits

事件	描述	类型
click	点击按钮时触发，加载和禁用状态不会触发	(event: any) => void
update:model-value	开关状态切换时触发	(value: any) => void
change 1.9.2+	开关状态切换时触发	(value: any) => void
update:loading	加载状态切换时触发	(loading: boolean) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-switch-font-size: 60rpx;
  --sar-switch-width: calc(1em / 6 * 10);
  --sar-switch-height: 1em;
  --sar-switch-transition-duration: var(--sar-duration);
  --sar-switch-bg: var(--sar-secondary-bg);
  --sar-switch-checked-bg: var(--sar-primary);

  --sar-switch-is-loading-opacity: var(--sar-loading-opacity);

  --sar-switch-thumb-gap: 6rpx;
  --sar-switch-thumb-width: calc(
    var(--sar-switch-height) - var(--sar-switch-thumb-gap) * 2
  );
  --sar-switch-thumb-height: var(--sar-switch-thumb-width);
  --sar-switch-thumb-border-radius: var(--sar-rounded-full);
  --sar-switch-thumb-bg: var(--sar-white);
  --sar-switch-thumb-color: var(--sar-gray-600);
  --sar-switch-thumb-transition-duration: var(--sar-duration);
}