Switch 开关

使用指南

  1. import { Switch } from 'vant';
  3. Vue.use(Switch);

代码演示

基础用法

  1. <van-switch v-model="checked" />
  1. export default {
  2.   data() {
  3.     return {
  4.       checked: true
  5.     };
  6.   }
  7. };

禁用状态

  1. <van-switch
  2.   v-model="checked"
  3.   disabled
  4. />

加载状态

  1. <van-switch
  2.   v-model="checked"
  3.   loading
  4. />

自定义大小

  1. <van-switch
  2.   v-model="checked"
  3.   size="24px"
  4. />

自定义颜色

  1. <van-switch
  2.   v-model="checked"
  3.   active-color="#07c160"
  4.   inactive-color="#f44"
  5. />

异步控制

  1. <van-switch
  2.   :value="checked"
  3.   @input="onInput"
  4. />
  1. export default {
  2.   data() {
  3.     return {
  4.       checked: true
  5.     };
  6.   },
  8.   methods: {
  9.     onInput(checked) {
  10.       Dialog.confirm({
  11.         title: '提醒',
  12.         message: '是否切换开关？'
  13.       }).then(() => {
  14.         this.checked = checked;
  15.       });
  16.     }
  17.   }
  18. };

API

参数说明类型默认值版本
v-model开关选中状态anyfalse-
loading是否为加载状态Booleanfalse-
disabled是否为禁用状态Booleanfalse-
size开关尺寸String30px1.0.0
active-color打开时的背景色String#1989fa1.4.2
inactive-color关闭时的背景色String#fff1.4.2
active-value打开时的值anytrue1.5.6
inactive-value关闭时的值anyfalse1.5.6

Event

事件名说明参数
change开关状态切换回调checked: 是否选中开关

原文: https://youzan.github.io/vant/#/zh-CN/switch