012_Switch开关

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. 运行项目