Switch 开关
介绍
用于在打开和关闭状态之间进行切换。
代码演示
基础用法
通过 v-model
绑定开关的选中状态,true
表示开,false
表示关。
<z-switch v-model="checked" />
import { ref } from 'vue';
const checked = ref(true);
自定义颜色
active-color
属性表示打开时的背景色,inactive-color
表示关闭时的背景色。
<z-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
自定义按钮
通过 node
插槽自定义按钮的内容。
<z-switch v-model="checked">
<template #node>
<view class="icon-wrapper">
<z-icon
:name="checked ? 'plus-circle-fill' : 'minus-circle-fill'"
:color="checked ? 'var(--z-blue)' : 'var(--z-gray-5)'"
size="40rpx"
/>
</view>
</template>
</z-switch>
<style>
.demo-switch {
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
</style>
异步控制
需要异步控制开关时,可以使用 modelValue
属性和 update:model-value
事件代替 v-model
,并在事件回调函数中手动处理开关状态。
<z-switch :model-value="checked" @update:model-value="onUpdateValue" />
<script lang="ts" setup>
import { ref } from 'vue'
import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()
const checked = ref(true)
const onUpdateValue = (newValue: any) => {
dialog
.showConfirmDialog({
title: '提醒',
message: '是否切换开关?'
})
.then(() => {
checked.value = newValue
})
}
</script>
搭配单元格使用
<z-cell center title="标题">
<template #right-icon>
<z-switch v-model="checked" />
</template>
</z-cell>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 开关选中状态 | any | false |
loading | 是否为加载状态 | boolean | false |
disabled | 是否为禁用状态 | boolean | false |
size | 开关按钮的尺寸,默认单位为 px | number | string | 52rpx |
active-color | 打开时的背景色 | string | #1989fa |
inactive-color | 关闭时的背景色 | string | rgba(120, 120, 128, 0.16) |
active-value | 打开时对应的值 | any | true |
inactive-value | 关闭时对应的值 | any | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 开关状态切换时触发 | value: any |
click | 点击时触发 | event: MouseEvent |
Slots
名称 | 说明 | 参数 |
---|---|---|
node | 自定义按钮的内容 | - |
background | 自定义开关的背景内容 | - |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-switch-size | 52rpx | - |
--z-switch-width | calc(1.8em + 8rpx) | - |
--z-switch-height | calc(1em + 8rpx) | - |
--z-switch-node-size | 1em | - |
--z-switch-node-background | var(--z-white) | - |
--z-switch-node-shadow | 0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05) | - |
--z-switch-background | rgba(120, 120, 128, 0.16) | - |
--z-switch-on-background | var(--z-primary-color) | - |
--z-switch-duration | var(--z-duration-base) | - |
--z-switch-disabled-opacity | var(--z-disabled-opacity) | - |