介绍
用于打开/关闭两种状态间的切换。
引入
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>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 变量
scss
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);
}