Vue-Switch-Demo

demo组件：

<template>
  <div id="QaSwitch">
    <el-row class="el-row">
      <el-card :body-style="{ padding: '20px' }">
        <div class="qaswitch">
          <strong>{{ Desc }}: </strong>
          <el-switch
            v-model="qavalue"
            :active-text="activevalue"
            :inactive-text="inactivevalue"
            :active-value="activevalue"
            :inactive-value="inactivevalue"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="toParent"
          >
          </el-switch>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "QaSwitch",
  props: ['Desc', 'activevalue', 'inactivevalue'],
  data() {
    return {
      qavalue: ""
    }
  },
  methods: {
      toParent: function() {
          this.$emit("qaswitch", this.qavalue)
      }
  }
};
</script>

<style></style>

加入main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Axios from 'axios'
import QaSwitch from '@/components/QaSwitch'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$axios = Axios
Vue.component(QaSwitch.name, QaSwitch)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

引用：

<el-card>
      <el-row>
        <QaSwitch @qaswitch="qaswitch1($event)" Desc="环境" activevalue="测试环境" inactivevalue="生产环境"></QaSwitch>
      </el-row>
      <el-row>{{ qavalue }}</el-row>
</el-card>

展示：