Switch 开关

使用指南

  1. import { Switch } from 'vant';
  2. 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. },
  7. methods: {
  8. onInput(checked) {
  9. Dialog.confirm({
  10. title: '提醒',
  11. message: '是否切换开关?'
  12. }).then(() => {
  13. this.checked = checked;
  14. });
  15. }
  16. }
  17. };

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