element/examples/docs/switch.md

基本用法

Switch 组件提供了平滑的开关。

:::demo 只需要el-switch元素绑定v-model到一个变量即可完成状态改变，状态是一个Boolean。

<el-switch v-model="value1"></el-switch>

:::

禁用状态

:::demo 设置disabled属性，接受一个Boolean，设置true即可禁用，此例中我们使用了on-text属性与off-text属性来设置开关旁的描述，value属性用于定义无需双向绑定情况的开关值。

<el-switch disabled></el-switch>
<el-switch disabled :value="false"></el-switch>
<el-switch on-text="" off-text="" disabled></el-switch>
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>

:::

自定义颜色

:::demo 使用on-color和off-color属性，可以自定义开关颜色。on-icon-class定义了开关时的图标，具体图标可以参见 Icon 组件文档，当设置了 Icon 后，text 值将被忽略。

<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>

:::

Attributes

参数	说明	类型	可选值	默认值
value	switch 的选中状态	boolean		true
disabled	是否禁用	boolean		false
width	switch 的宽度（像素）	number		58（有文字）/ 46（无文字）
on-icon-class	switch 打开时所显示图标的类名	string
off-icon-class	switch 关闭时所显示图标的类名	string
on-text	switch 打开时的文字	string		'ON'
off-text	switch 关闭时的文字	string		'OFF'
on-color	switch 打开时的背景色	string
off-color	switch 关闭时的背景色	string
name	switch 对应的 name 属性	string

Events

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数