Switch 开关

引入

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

代码演示

基础用法

  1. <van-switchv-model="checked"/>
  1. exportdefault{
  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. exportdefault{
  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

Props

参数说明类型默认值版本
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

Events

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

Switch 开关 - 图1