Switch 开关
优质
小牛编辑
133浏览
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 | ||
width | switch 的宽度(像素 | number | 40 | |
active-icon-class | switch 打开时所显示图标的类名,设置此项会忽略 on-text | string | ||
inactive-icon-class | switch 关闭时所显示图标的类名,设置此项会忽略 off-text | string | ||
active-text | switch 打开时的文字 | string | ||
inactive-text | switch 关闭时的文字 | string | ||
active-color | switch 打开时的背景色 | string | #409EFF | |
inactive-color | switch 关闭时的背景色 | string | #C0CCDA | |
name | switch 对应的 name 属性 | string |