一、效果（两个都是二次封装的）

 二、源代码

        核心代码

<template>
    <el-button v-if="!addValve" :type="type" class="pub" @click="handClick"><slot /></el-button>
    <el-button v-else :class="addType" class="pub" @click="handClick"><slot /></el-button>
</template>

<script>
export default {
  name: 'jwButton',
  watch: {
    type: {
      handler: function (newVal) {
        const value = newVal
        // element原生
        const arr = ['primary', 'success', 'info', 'warning', 'danger']
        // 自增type属性
        const addArr = ['add', 'error']
        if (arr.includes(value)) {
          this.addValve = false
        } else {
          if (addArr.includes(value)) {
            this.addValve = true
            this.addType = value
          }
        }
      },
      immediate: true
    }
  },
  props: {
    type: {
      type: String
    }
  },
  data () {
    return {
      addValve: false,
      addType: 'add'
    }
  },
  methods: {
    handClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
<style lang='scss' scoped>
.pub {
  min-width: 20px;
  color: #fff;
  font-size: 24px;
}
.add {
  min-width: 20px;
  height: 40px;
  color: #333;
  background-color: #f1f1f1;
  border-radius: 4px;
}
.add:hover {
  opacity: 0.8;
}
.add:active {
  color: #fff;
  background-color: #6633FF;
}
.error {
  background-color: rgb(206, 97, 97);
  color: #fff;
  border-radius: 4px;
}
</style>

        引用

<template>
  <div>
    <jw-button type="primary">jsdahdjkashdakjshdakjshdakshdaksdhak</jw-button>
    <jw-button type="error" @click="onClick">jsdahdjkashdakjshdakjshdakshdaksdhak</jw-button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    onClick () {
      console.log('zhhs')
    }
  }
}
</script>
<style lang='scss' scoped>
.btnn {
  background-color: rgb(184, 61, 61);
  color: #fff;
}
</style>

         全局挂载

import Vue from 'vue'
// 引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入自定义组件
import Button from './custom/jwButton.vue'

Vue.component('jw-button', Button)

Vue.use(ElementUI)

最后

以上就是端庄水杯为你收集整理的Vue2二次封装elementUI教程，用例button按钮 一、效果（两个都是二次封装的） 二、源代码的全部内容，希望文章能够帮你解决Vue2二次封装elementUI教程，用例button按钮 一、效果（两个都是二次封装的） 二、源代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。