Vant SwitchCell 開關(guān)單元格

2022-05-31 13:41 更新

廢棄提示

SwitchCell 組件將在 3.0 版本中廢棄,請直接使用 Cell 和 Switch 組件代替

引入

import Vue from 'vue';
import { SwitchCell } from 'vant';

Vue.use(SwitchCell);

代碼演示

基礎(chǔ)用法

<van-cell-group>
  <van-switch-cell v-model="checked" title="標題" />
</van-cell-group>
export default {
  data() {
    return {
      checked: true
    }
  }
}

禁用狀態(tài)

通過disabled屬性可以將組件設(shè)置為禁用狀態(tài)

<van-cell-group>
  <van-switch-cell v-model="checked" disabled title="標題" />
</van-cell-group>

加載狀態(tài)

通過loading屬性可以將組件設(shè)置為加載狀態(tài)

<van-cell-group>
  <van-switch-cell v-model="checked" loading title="標題" />
</van-cell-group>

API

Props

參數(shù)說明類型默認值
v-model開關(guān)狀態(tài)anyfalse
title左側(cè)標題string''
border是否展示單元格內(nèi)邊框booleantrue
cell-size單元格大小,可選值為 largestring-
loading是否為加載狀態(tài)booleanfalse
disabled是否為禁用狀態(tài)booleanfalse
size開關(guān)尺寸number | string24px
active-color開關(guān)時的背景色string#1989fa
inactive-color開關(guān)時的背景色stringwhite
active-value打開時的值anytrue
inactive-value關(guān)閉時的值anyfalse

Events

事件名說明回調(diào)參數(shù)
change開關(guān)狀態(tài)切換回調(diào)checked: 是否選中開關(guān)


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號