element ui button组件二次封装

1.全局注册组件

在main.js中添加：

import MyButton from './components/cl-button.vue';

const Loading = {
  install:(Vue =>{
    Vue.component('cl-button',MyButton)
  })
}

Vue.use(Loading);

2.封装组件

cl-button.vue:

<template>
    <el-button :style="buttonStyle">
      <slot name="title"></slot>
    </el-button>
</template>

<script>
export default {
  name: "WorkspaceJsonClButton",
  props:{
    type:{
        type:String,
        default:"default"
    },
    size:{
        type:String,
        default:"mini"
    },
    borderColor:{
        type:String,
        default:"pink"
    }
  },
  data() {
    return {};
  },
  computed:{
    buttonStyle(){
     let background = ""
     switch (this.type){
         case "error":
            background = "red";
            break;
         case "default": 
            background = "pink";
            break;  
         case "success": 
            background = "green";
            break;     
     }
     const fontSize =
     this.size == "mini" ? "12px" : this.size == "big" ? "16px" : this.size == "nomal" ? "14px" : "14px"
     const borderColor = this.borderColor
     return {background, fontSize, borderColor}
    }
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped></style>

3.使用封装的组件

    <div>
        <cl-button type="default" size="big" borderColor="green">
            <span slot="title">主要按钮</span>
        </cl-button>
    </div>