Switch 开关

概述

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

使用指南

在.vue中引入组件

<script>
    import iSwitch from 'iview-mpvue/dist/components/switch/switch'
    export default {
        components: {
            'i-switch': iSwitch
        }
    }
</script>

示例

<i-cell-group>
    <i-cell title="基本用法">
        <i-switch :value="switch1" @change="onChange" slot="footer"></i-switch>
    </i-cell>
    <i-cell title="自定义内容">
        <i-switch :value="switch1" size="large" @change="onChange" slot="footer">
            <view slot="open">开启</view>
            <view slot="close">关闭</view>
        </i-switch>
    </i-cell>
    <i-cell title="图标">
        <i-switch :value="switch1" @change="onChange" slot="footer">
            <i-icon type="right" slot="open"></i-icon>
            <i-icon type="close" slot="close"></i-icon>
        </i-switch>
    </i-cell>
    <i-cell title="禁止切换">
        <i-switch :value="switch1" :disabled="true" slot="footer"></i-switch>
    </i-cell>
</i-cell-group>

API

Switch properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
value	指定当前是否选中	Boolean	false
size	开关的尺寸，可选值为 large、small、default 或者不写。建议开关如果使用了2个汉字的文字，使用 large	String	default
disabled	是否禁用开关	Boolean	false
name	隐藏的 input 的 name 值	String	-

Switch events

事件名	说明	返回值
v-on:change	开关变化时触发，返回当前的状态	{ value }

Switch slot

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