Switch 开关

优质
小牛编辑
118浏览
2023-12-01

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

基本用法

<!--你可以为 model 绑定布尔变量-->
<!--或者通过绑定 (modelChange)=handle 来获得每次值改变的触发-->
<el-switch [(model)]="value1">
</el-switch>
<el-switch [model]="true" [active-color]="'#13ce66'" [inactive-color]="'#ff4949'">
</el-switch>

禁用状态

设置 elDisabled 属性, 接受一个 boolean

<el-switch [(model)]="value1"[elDisabled]="true">
</el-switch>
<el-switch [(model)]="value2" [active-color]="'#13ce66'" [inactive-color]="'#ff4949'"
  [elDisabled]="true">
</el-switch>

自定义图标名

设置指定图标后,会忽略文字显示

<el-switch [model]="true" [active-icon-class]="'el-icon-circle-check'"
  [inactive-icon-class]="'el-icon-circle-cross'">
</el-switch>

自定义文字

<el-switch [model]="true" active-text="移动"
  inactive-text="联通">
</el-switch>

Switch Attributes

参数说明类型可选值默认值
elDisabled是否禁用boolean
widthswitch 的宽度(像素number40
active-icon-classswitch 打开时所显示图标的类名,设置此项会忽略 on-textstring
inactive-icon-classswitch 关闭时所显示图标的类名,设置此项会忽略 off-textstring
active-textswitch 打开时的文字string
inactive-textswitch 关闭时的文字string
active-colorswitch 打开时的背景色string#409EFF
inactive-colorswitch 关闭时的背景色string#C0CCDA
nameswitch 对应的 name 属性string