W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
用于在打開和關(guān)閉狀態(tài)之間進(jìn)行切換。
通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Switch } from 'vant';
const app = createApp();
app.use(Switch);
通過 ?v-model
? 綁定開關(guān)的選中狀態(tài),?true
? 表示開,?false
? 表示關(guān)。
<van-switch v-model="checked" />
import { ref } from 'vue';
export default {
setup() {
const checked = ref(true);
return { checked };
},
};
通過 ?disabled
? 屬性來禁用開關(guān),禁用狀態(tài)下開關(guān)不可點(diǎn)擊。
<van-switch v-model="checked" disabled />
通過 ?loading
? 屬性設(shè)置開關(guān)為加載狀態(tài),加載狀態(tài)下開關(guān)不可點(diǎn)擊。
<van-switch v-model="checked" loading />
通過 ?size
? 屬性自定義開關(guān)的大小。
<van-switch v-model="checked" size="22px" />
?active-color
? 屬性表示打開時(shí)的背景色,?inactive-color
? 表示關(guān)閉時(shí)的背景色。
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
通過 ?node
? 插槽自定義按鈕的內(nèi)容。
<van-switch v-model="checked">
<template #node>
<div class="icon-wrapper">
<van-icon :name="checked ? 'success' : 'cross'" />
</div>
</template>
</van-switch>
<style>
.icon-wrapper {
display: flex;
width: 100%;
justify-content: center;
font-size: 18px;
}
.icon-wrapper .van-icon-success {
line-height: 32px;
color: var(--van-blue);
}
.icon-wrapper .van-icon-cross {
line-height: 32px;
color: var(--van-gray-5);
}
</style>
需要異步控制開關(guān)時(shí),可以使用 ?modelValue
? 屬性和 ?update:model-value
? 事件代替 ?v-model
?,并在事件回調(diào)函數(shù)中手動(dòng)處理開關(guān)狀態(tài)。
<van-switch :model-value="checked" @update:model-value="onUpdateValue" />
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
export default {
setup() {
const checked = ref(true);
const onUpdateValue = (newValue) => {
showConfirmDialog({
title: '提醒',
message: '是否切換開關(guān)?',
}).then(() => {
checked.value = newValue;
});
};
return {
checked,
onUpdateValue,
};
},
};
<van-cell center title="標(biāo)題">
<template #right-icon>
<van-switch v-model="checked" />
</template>
</van-cell>
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 開關(guān)選中狀態(tài) | any | false
|
loading | 是否為加載狀態(tài) | boolean | false
|
disabled | 是否為禁用狀態(tài) | boolean | false
|
size | 開關(guān)按鈕的尺寸,默認(rèn)單位為 px
|
number | string | 26px
|
active-color | 打開時(shí)的背景色 | string | #1989fa
|
inactive-color | 關(guān)閉時(shí)的背景色 | string | rgba(120, 120, 128, 0.16)
|
active-value | 打開時(shí)對(duì)應(yīng)的值 | any | true
|
inactive-value | 關(guān)閉時(shí)對(duì)應(yīng)的值 | any | false
|
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 開關(guān)狀態(tài)切換時(shí)觸發(fā) | value: any |
click | 點(diǎn)擊時(shí)觸發(fā) | event: MouseEvent |
名稱 | 說明 | 參數(shù) |
---|---|---|
node v3.5.0
|
自定義按鈕的內(nèi)容 | - |
background v3.5.0
|
自定義開關(guān)的背景內(nèi)容 | - |
組件導(dǎo)出以下類型定義:
import type { SwitchProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-switch-size | 26px | - |
--van-switch-width | calc(1.8em + 4px) | - |
--van-switch-height | calc(1em + 4px) | - |
--van-switch-node-size | 1em | - |
--van-switch-node-background | var(--van-white) | - |
--van-switch-node-shadow | 0 3px 1px 0 rgba(0, 0, 0, 0.05) | - |
--van-switch-background | rgba(120, 120, 128, 0.16) | - |
--van-switch-on-background | var(--van-primary-color) | - |
--van-switch-duration | var(--van-duration-base) | - |
--van-switch-disabled-opacity | var(--van-disabled-opacity) | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: