Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

import { Switch } from 'mind-ui-vue';
Vue.use(Switch);

示例

基础用法

<m-switch v-model="checked" @change="onChange" />

禁用状态

<m-switch v-model="checked" disabled />

加载状态

<m-switch v-model="checked" loading />

自定义颜色

<m-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />

异步控制

<m-switch v-model="checked" :loading="loading" @change="onAsyncChange" />

export default {
  data() {
    return {
      checked: true,
      loading: false,
    }
  },
  methods: {
    onAsyncChange(value) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    }
  }
}

Api

Props

参数	说明	类型	可选值	默认值
v-model	开关选中状态	Boolean	—	false
name	表单提交时使用	String	—	—
loading	是否为更新中	Boolean	—	false
disabled	是否禁用	Boolean	—	false
active-color	switch 打开时的背景色	String	—	#1989fa
inactive-color	switch 关闭时的背景色	String	—	#ffffff
active-value	switch 打开时的值	Boolean String Number	—	true
inactive-value	switch 关闭时的值	Boolean String Number	—	false

Events

事件名称	说明	返回值
change	switch 状态发生变化时的回调函数	event.detail: 新状态的值