使用Vue的mixin混入打造UI组件库

一、定制自己的组件

• 在src下新建一个libs

• 设计组件传值样式
  Button.vue

<template>
  <button :class="['my-btn', btnStyle]">
  <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyBtn',
  props: {
    btnStyle: String
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
  .my-btn {
    height: 32px;
    padding: 0 15px;   
    border: 1px solid #d9d9d9;
    outline: none;
    border-radius: 4px;
    background-color: #fff;
    color: rgba(0,0,0,.65);
  }
  .my-btn.primary {
     background-color: #40a9ff;
    color: #FFF;
  }
  .my-btn.success {
     background-color: #52c41a;
    color: #FFF;
  }
  .my-btn.danger {
     background-color: #ff7371;
    color: #FFF;
  }
  .my-btn.warn {
     background-color: #faad14;
    color: #FFF;
  }
</style>

• 在myUI的index导出
  index.js

import MyBtn from './Button'

export default {
  components: {
    MyBtn
  }
}

二、在main.js全局注入自己的组件

import MyUi from '@/libs/myUi'
// 注入MyUi
Vue.mixin(MyUi)

三、使用

<template>
 <div>
  <my-btn >MYBTN</my-btn>
  <my-btn btnStyle="primary">MYBTN</my-btn>
  <my-btn btnStyle="success">MYBTN</my-btn>
  <my-btn btnStyle="warn">MYBTN</my-btn>
  <my-btn btnStyle="danger">MYBTN</my-btn>
 </div>
</template>
<script>
export default {
  data () {
    return {
  	}
  },
  methods: {
  }
}
</script>

效果