Switch 开关

引入

基础用法

通过 绑定开关的选中状态，true 表示开，false 表示关。

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

禁用状态

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

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

自定义大小

通过 size 属性自定义开关的大小。

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

自定义颜色

active-color 属性表示打开时的背景色，inactive-color 表示关闭时的背景色。

异步控制

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

API

Props

Events

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考。