Switch 开关

概述

在两种状态间切换时用到的开关选择器。

注意:没有使用 iview-loader 时,必须使用 i-switch 标签。

代码示例

Switch 开关 - 图1

基本

基本用法,状态切换时会触发事件。

  1. <template>
  2. <Switch v-model="switch1" @on-change="change" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. switch1: false
  9. }
  10. },
  11. methods: {
  12. change (status) {
  13. this.$Message.info('开关状态:' + status);
  14. }
  15. }
  16. }
  17. </script>

Switch 开关 - 图2

尺寸

设置sizelargesmall 使用大号和小号的开关。

  1. <template>
  2. <Switch size="large" />
  3. <Switch />
  4. <Switch size="small" />
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Switch 开关 - 图3

文字和图标

自定义内容,建议如果使用2个汉字,将开关尺寸设置为 large。

<template>
    <Switch>
        <span slot="open">开</span>
        <span slot="close">关</span>
    </Switch>
    <Switch>
        <Icon type="md-checkmark" slot="open"></Icon>
        <Icon type="md-close" slot="close"></Icon>
    </Switch>
    <br><br>
    <Switch size="large">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
    </Switch>
    <Switch size="large">
        <span slot="open">ON</span>
        <span slot="close">OFF</span>
    </Switch>
</template>
<script>
    export default {

    }
</script>

Switch 开关 - 图4

不可用

禁用开关。

<template>
    <Switch :disabled="disabled" />
    <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
</template>
<script>
    export default {
        data () {
            return {
                disabled: true
            }
        },
    }
</script>

Switch 开关 - 图5

加载中

标识开关操作仍在执行中。

<template>
    <Switch loading :value="true" />
    <Switch loading :value="false" size="small" />
</template>
<script>
    export default {

    }
</script>

Switch 开关 - 图6

自定义颜色

4.0.0 设置属性 true-colorfalse-color 可以自定义背景色。

<template>
    <Switch true-color="#13ce66" false-color="#ff4949" />
</template>
<script>
    export default {

    }
</script>

Switch 开关 - 图7

阻止切换

4.0.0 设置属性 before-change 并返回 Promise,可以阻止切换。

<template>
    <Switch :before-change="handleBeforeChange" />
</template>
<script>
    export default {
        methods: {
            handleBeforeChange () {
                return new Promise((resolve) => {
                    this.$Modal.confirm({
                        title: '切换确认',
                        content: '您确认要切换开关状态吗?',
                        onOk: () => {
                            resolve();
                        }
                    });
                });
            }
        }
    }
</script>

API

Switch props

属性 说明 类型 默认值
value 指定当前是否选中,可以使用 v-model 双向绑定数据 Boolean false
size 开关的尺寸,可选值为largesmalldefault或者不写。建议开关如果使用了2个汉字的文字,使用 large。 String -
disabled 禁用开关 Boolean false
true-value 选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 String, Number, Boolean true
false-value 没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 String, Number, Boolean false
true-color 4.0.0 自定义打开时的背景色 String -
false-color 4.0.0 自定义关闭时的背景色 String -
before-change 4.0.0 返回 Promise 可以阻止切换 Function -
loading 加载中的开关 Boolean false

Switch events

事件名 说明 返回值
on-change 开关变化时触发,返回当前的状态 true | false

Switch slot

名称 说明
open 自定义显示打开时的内容
close 自定义显示关闭时的内容