Switch 开关

概述

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

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

代码示例

基本

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

<template>
    <Switch v-model="switch1" @on-change="change" />
</template>
<script>
    export default {
        data () {
            return {
                switch1: false
            }  
        },
        methods: {
            change (status) {
                this.$Message.info('开关状态：' + status);
            }
        }
    }
</script>

尺寸

设置size为 large 或 small 使用大号和小号的开关。

<template>
    <Switch size="large" />
    <Switch />
    <Switch size="small" />
</template>
<script>
    export default {
    }
</script>

文字和图标

自定义内容，建议如果使用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>

不可用

禁用开关。

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

加载中

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

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

    }
</script>

自定义颜色

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

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

    }
</script>

阻止切换

^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

Switch events

Switch slot