Sard Uniapp

Appearance

在新窗口打开⤴

Switch开关

介绍 ​

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

引入 ​

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

代码演示 ​

基础使用 ​

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

vue
<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
<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
<template>
  <sar-switch v-model="checked" size="48rpx" />
</template>

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

const checked = ref(true)
</script>
vue
<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
<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
<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
<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
<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>

只读和禁用 ​

只读或禁用时不可操作。

vue
<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
<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
<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>

带有文字 1.30+ ​

可以使用 checked-text 和 unchecked-text 属性设置开关内的文字。

vue
<template>
  <sar-switch v-model="checked" checked-text="开启" unchecked-text="关闭" />
  <sar-switch
    v-model="checked"
    checked-text="开启（长文本）"
    unchecked-text="关闭"
    class="ml-20"
  />
</template>

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

const checked = ref(true)
</script>
vue
<template>
  <sar-switch v-model="checked" checked-text="开启" unchecked-text="关闭" />
  <sar-switch
    v-model="checked"
    checked-text="开启（长文本）"
    unchecked-text="关闭"
    class="ml-20"
  />
</template>

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

使用插槽自定义内容 1.30+ ​

如果需要在开关内部展示复杂的内容，也可以使用 checked-text 和 unchecked-text 插槽。

vue
<template>
  <sar-switch v-model="checked" @change="onChange">
    <template #checked-text>
      <sar-icon name="success" />
    </template>
    <template #unchecked-text>
      <sar-icon name="close" />
    </template>
  </sar-switch>
</template>

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

const checked = ref(true)

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-switch v-model="checked" @change="onChange">
    <template #checked-text>
      <sar-icon name="success" />
    </template>
    <template #unchecked-text>
      <sar-icon name="close" />
    </template>
  </sar-switch>
</template>

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

API ​

SwitchProps ​

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

SwitchSlots 1.30+ ​

插槽描述属性
checked-text自定义打开时的内容-
unchecked-text自定义关闭时的内容-

SwitchEmits ​

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

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-switch-size: 60rpx;
  --sar-switch-width: calc(var(--sar-switch-size) / 6 * 10);
  --sar-switch-height: var(--sar-switch-size);
  --sar-switch-transition-duration: var(--sar-duration);
  --sar-switch-bg: var(--sar-tertiary-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);

  --sar-switch-text-min-margin: 18rpx;
  --sar-switch-text-max-margin: calc(
    var(--sar-switch-thumb-width) + var(--sar-switch-text-min-margin)
  );
  --sar-switch-text-color: var(--sar-white);
  --sar-switch-text-font-size: var(--sar-text-base);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao