VUE(6) : vue-element-admin[6] : 开关组件及回显

参考 : 

        https://www.jianshu.com/p/fc8f742d7a84

        vue 开关组件 - mai0509 - 博客园

<template>
        <el-form-item v-model="temp.enable" :label="$t('common.enable')" prop="enable">
          <div :class="['e__switch',{'e_is-checked':switchValue}]">
            <span class="e__switch-core" @click="toggle()" />
          </div>
        </el-form-item>
</template>

<script>
export default {
  name: 'ComplexTable',
  data() {
    return {
      switchValue: true,
      temp: {
        enable: undefined
      }
    }
  },
  created() {
    this.temp.enable = 0
    this.getList()
  },
  methods: {
    toggle() {
      this.switchValue = !this.switchValue
      if (this.switchValue) {
        this.temp.enable = 1
      } else {
        this.temp.enable = 0
      }
    },
    handleCreate() {
      // 重置为关
	  this.switchValue = false
    },
    handleUpdate(row) {
      // 回显
      if (row.enable === 1) {
        this.switchValue = true
      } else {
        this.switchValue = false
      }
    }
  }
}
</script>

<style>
    .e__switch {
        display: inline-flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        vertical-align: middle;
        cursor: pointer;
    }

    .e__switch>input {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0;
    }

    .e__switch-core {
        margin: 0;
        position: relative;
        width: 40px;
        height: 20px;
        border: 1px solid #DCDFE6;
        outline: 0;
        border-radius: 10px;
        box-sizing: border-box;
        background: #DCDFE6;
        transition: border-color .3s, background-color .3s;
        vertical-align: middle;
    }

    .e__switch-core::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        border-radius: 100%;
        transition: all .3s;
        width: 16px;
        height: 16px;
        background-color: #FFF;
    }
    
    .e__switch.e_is-checked .e__switch-core {
        border-color: #409EFF;
        background-color: #409EFF;
    }
    
    .e__switch.e_is-checked .e__switch-core::after {
        left: 100%;
        margin-left: -17px;
    }
</style>