Switch 开关

Scan me!

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

引入

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

代码演示

开启状态

Switch 开关 - 图2

  1. <template>
  2. <div class="md-example-child md-example-child-switch md-example-child-switch-0">
  3. <md-switch
  4. v-model="isActive"
  5. @change="handler('switch0', isActive, $event)"
  6. ></md-switch>
  7. </div>
  8. </template>
  9. <script>
  10. import {Switch} from 'mand-mobile'
  11. export default {
  12. name: 'switch-demo',
  13. components: {
  14. [Switch.name]: Switch,
  15. },
  16. data() {
  17. return {
  18. isActive: true,
  19. }
  20. },
  21. methods: {
  22. handler(name, active) {
  23. console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
  24. },
  25. },
  26. }
  27. </script>

开启不可用状态

Switch 开关 - 图3

  1. <template>
  2. <div class="md-example-child md-example-child-switch md-example-child-switch-2">
  3. <md-switch
  4. v-model="isActive"
  5. disabled
  6. @change="handler('switch2', isActive, $event)"
  7. ></md-switch>
  8. </div>
  9. </template>
  10. <script>
  11. import {Switch} from 'mand-mobile'
  12. export default {
  13. name: 'switch-demo',
  14. components: {
  15. [Switch.name]: Switch,
  16. },
  17. data() {
  18. return {
  19. isActive: true,
  20. }
  21. },
  22. methods: {
  23. handler(name, active) {
  24. console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
  25. },
  26. },
  27. }
  28. </script>

关闭状态

Switch 开关 - 图4

  1. <template>
  2. <div class="md-example-child md-example-child-switch md-example-child-switch-1">
  3. <md-switch
  4. v-model="isActive"
  5. @change="handler('switch1', isActive, $event)"
  6. ></md-switch>
  7. </div>
  8. </template>
  9. <script>
  10. import {Switch} from 'mand-mobile'
  11. export default {
  12. name: 'switch-demo',
  13. components: {
  14. [Switch.name]: Switch,
  15. },
  16. data() {
  17. return {
  18. isActive: false,
  19. }
  20. },
  21. methods: {
  22. handler(name, active) {
  23. console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
  24. },
  25. },
  26. }
  27. </script>

关闭不可用状态

Switch 开关 - 图5

  1. <template>
  2. <div class="md-example-child md-example-child-switch md-example-child-switch-3">
  3. <md-switch
  4. v-model="isActive"
  5. disabled
  6. @change="handler('switch3', isActive, $event)"
  7. ></md-switch>
  8. </div>
  9. </template>
  10. <script>
  11. import {Switch} from 'mand-mobile'
  12. export default {
  13. name: 'switch-demo',
  14. components: {
  15. [Switch.name]: Switch,
  16. },
  17. data() {
  18. return {
  19. isActive: false,
  20. }
  21. },
  22. methods: {
  23. handler(name, active) {
  24. console.log(`Status of switch ${name} is ${active ? 'active' : 'inactive'}`)
  25. },
  26. },
  27. }
  28. </script>

API

Switch Props

属性说明类型默认值
v-model打开或者关闭Booleanfalse
disabled是否禁用Booleanfalse

Switch Events

@change(isActive)

事件说明

属性说明类型
isActive开关状态,打开或者关闭Boolean