1. Switch开关
1.1. 表示两种相互对立的状态间的切换, 多用于触发「开/关」。
1.2. 开关属性
参数 | 说明 | 类型 | 默认值 |
value / v-model | 绑定值 | boolean / string / number | 无 |
disabled | 是否禁用 | boolean | false |
width | switch的宽度(像素) | number | 40 |
active-icon-class | switch打开时所显示图标的类名, 设置此项会忽略active-text | string | 无 |
inactive-icon-class | switch关闭时所显示图标的类名, 设置此项会忽略inactive-text | string | 无 |
active-text | switch打开时的文字描述 | string | 无 |
inactive-text | switch关闭时的文字描述 | string | 无 |
active-value | switch打开时的值 | boolean / string / number | true |
inactive-value | switch关闭时的值 | boolean / string / number | false |
active-color | switch打开时的背景色 | string | #409EFF |
inactive-color | switch关闭时的背景色 | string | #C0CCDA |
name | switch对应的name属性 | string | 无 |
validate-event | 改变switch状态时是否触发表单的校验 | boolean | true |
1.3. 开关事件
事件名称 | 说明 | 回调参数 |
change | switch状态发生变化时的回调函数 | 新状态的值 |
1.4. 开关方法
方法名 | 说明 |
focus | 使Switch获取焦点 |
2. Switch开关例子
2.1. 使用脚手架新建一个名为element-ui-switch的前端项目, 同时安装Element插件。
2.2. 编写App.vue
<template>
<div id="app">
<h1>基本用法</h1>
<h4>绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。</h4>
<el-switch v-model="base_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<h1>文字描述</h1>
<h4>使用active-text属性与inactive-text属性来设置开关的文字描述。</h4>
<el-switch v-model="text_value1" active-text="按月付费" inactive-text="按年付费" @change="handleChange"></el-switch>
<el-switch style="display: block" v-model="text_value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"></el-switch>
<h1>扩展的value类型</h1>
<h4>设置active-value和inactive-value属性, 接受Boolean、String或Number类型的值。</h4>
<el-tooltip :content="'Switch value: ' + ext_value" placement="top">
<el-switch v-model="ext_value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"></el-switch>
</el-tooltip>
<h1>禁用状态</h1>
<h4>设置disabled属性, 接受一个Boolean, 设置true即可禁用。</h4>
<el-switch v-model="disabled_value1" disabled></el-switch>
<el-switch v-model="disabled_value2" disabled></el-switch>
</div>
</template>
<script>
export default {
data () {
return {
base_value: true,
text_value1: true,
text_value2: true,
ext_value: '100',
disabled_value1: true,
disabled_value2: false
}
},
methods: {
handleChange (val) {
console.log(val)
}
}
}
</script>
2.3. 运行项目