012_ switch

1. Switch switch

1.1. Represents a switch between two opposing states , It's used to trigger 「 open / Turn off 」.

1.2. Switch properties

Parameters	explain	type	The default value is
value / v-model	Binding value	boolean / string / number	nothing
disabled	Whether to disable	boolean	false
width	switch Width ( Pixels )	number	40
active-icon-class	switch The class name of the icon displayed when opened , Setting this option will ignore active-text	string	nothing
inactive-icon-class	switch The class name of the icon displayed when closing , Setting this option will ignore inactive-text	string	nothing
active-text	switch Text description when opening	string	nothing
inactive-text	switch Text description when closing	string	nothing
active-value	switch On the value of	boolean / string / number	true
inactive-value	switch The value at the time of closing	boolean / string / number	false
active-color	switch The background color when opened	string	#409EFF
inactive-color	switch Background color when off	string	#C0CCDA
name	switch Corresponding name attribute	string	nothing
validate-event	change switch Whether to trigger the verification of the form in the status	boolean	true

1.3. Switch events

Event name	explain	Callback Arguments
change	switch Callback function when state changes	The value of the new state

2. Switch Switch example

2.1. Use the scaffold to create a new one named element-ui-switch Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <el-switch v-model="base_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

    <h1> A word description </h1>
    <el-switch v-model="text_value1" active-text=" Pay by month " inactive-text=" Pay per year " @change="handleChange"></el-switch>
    <el-switch style="display: block" v-model="text_value2" active-color="#13ce66" inactive-color="#ff4949" active-text=" Pay by month " inactive-text=" Pay per year "></el-switch>

    <h1> Extended value type </h1>
    <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> Disabled state </h1>
    <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. Run the project