Skip to content
CONTENTS

Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」

基本用法

绑定 v-model 到一个 Boolean 类型的变量

禁用状态

设置 disabled 属性,接受一个 Boolean,设置 true 即可禁用

文字描述

使用 active-text 属性与 inactive-text 属性来设置开关的文字描述,使用 active-color 属性与 inactive-color 属性来设置开关的背景色

尺寸大小

使用 size 属性改变尺寸大小。 除了默认大小外,还有另外两个选项: large, small

显示自定义图标

使用 inactive-icon 和 active-icon 属性来添加图标。 使用 inline-prompt 属性来控制图标显示在点内。

API

属性

参数说明类型可选值默认值
v-model绑定值booleantrue / false
disabled是否禁用booleantrue / falsefalse
active-textswitch 打开时的文字描述string
inactive-textswitch 关闭时的文字描述string
active-iconswitch 打开时的图标string
inactive-iconswitch 关闭时的图标string
active-colorswitch 打开时的背景色string#409EFF
inactive-colorswitch 关闭时的背景色string#C0CCDA
sizeswitch 的大小string large / default / small

事件

事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值

Released under the MIT License.