Switch 开关

开关按钮，用于表示开关状态/两种状态之间的切换

引入

import { Switch } from 'mand-mobile'
Vue.component(Switch.name, Switch)

代码演示

开启状态

<template>
  <div class="md-example-child md-example-child-switch md-example-child-switch-0">
    <md-switch
      v-model="isActive"
      @change="handler('switch0', isActive, $event)"
    ></md-switch>
  </div>
</template>
<script>
import {Switch} from 'mand-mobile'
export default {
  name: 'switch-demo',
  components: {
    [Switch.name]: Switch,
  },
  data() {
    return {
      isActive: true,
    }
  },
  methods: {
    handler(name, active) {
      console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
    },
  },
}
</script>
                

开启不可用状态

<template>
  <div class="md-example-child md-example-child-switch md-example-child-switch-2">
    <md-switch
      v-model="isActive"
      disabled
      @change="handler('switch2', isActive, $event)"
    ></md-switch>
  </div>
</template>
<script>
import {Switch} from 'mand-mobile'
export default {
  name: 'switch-demo',
  components: {
    [Switch.name]: Switch,
  },
  data() {
    return {
      isActive: true,
    }
  },
  methods: {
    handler(name, active) {
      console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
    },
  },
}
</script>
                

关闭状态

<template>
  <div class="md-example-child md-example-child-switch md-example-child-switch-1">
    <md-switch
      v-model="isActive"
      @change="handler('switch1', isActive, $event)"
    ></md-switch>
  </div>
</template>
<script>
import {Switch} from 'mand-mobile'
export default {
  name: 'switch-demo',
  components: {
    [Switch.name]: Switch,
  },
  data() {
    return {
      isActive: false,
    }
  },
  methods: {
    handler(name, active) {
      console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
    },
  },
}
</script>
                

关闭不可用状态

<template>
  <div class="md-example-child md-example-child-switch md-example-child-switch-3">
    <md-switch
      v-model="isActive"
      disabled
      @change="handler('switch3', isActive, $event)"
    ></md-switch>
  </div>
</template>
<script>
import {Switch} from 'mand-mobile'
export default {
  name: 'switch-demo',
  components: {
    [Switch.name]: Switch,
  },
  data() {
    return {
      isActive: false,
    }
  },
  methods: {
    handler(name, active) {
      console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
    },
  },
}
</script>
                

API

Switch Props

Switch Events

@change(isActive)

事件说明