使用mixin做到混入自定义的ui组件(简单版)

1.自定义一个组件叫做mybutton.vue
注意两点：1.文字使用插槽2.类名使用动态props
都是为了让用户自定义

<template>
  <button type="button" class="mybtn" :class="[d_name]">
    <!-- BUTTON -->
    <!-- 这里的文字需要使用插槽，让用户自定义 -->
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    d_name: {
      type: String
    }
  }
}
</script>

<style scoped>
.mybtn {
  border: none;
  padding: 5px 8px;
  outline: none;
  background: none;
  color: black;
}
/* 注意下面的类名最好是需要用户主动设置 */
.mybtn.primay {
  background-color: blue;
  color: white;
}
.mybtn.danger {
  background-color: red;
   color: white;
}
.mybtn.success {
  background-color: green;
   color: white;
}
</style>

2.再定义一个用来mixin的 js文件 mix.js
里面就是很简单的导入导出该组件

import mybutton from './mybutton.vue'
export default { components: { mybutton } }

3.再使用的地方导入该mix对象
组件内是局部混入，当然根据需要你也可以做成全局混入

<template>
  <div class="home">
    <!-- <div class="con"><tab></tab></div> -->
    <mybutton>BUTTON</mybutton>
    <mybutton d_name="success">BUTTON1</mybutton>
    <mybutton d_name="danger">BUTTON2</mybutton>
    <mybutton d_name="primay">BUTTON3</mybutton>
  </div>
</template>
<script>
import tab from '../components/tab/tab.vue'
import btnMix from '../libs/myui/mix.js'
export default {
  name: 'Home',
  // 这是一种局部的混合
  // mixins: [btnMix],
  components: { tab }
}
</script>

4.在main.js中，使用Vue.mixin(对象)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import btnMix from './libs/myui/mix.js'
Vue.config.productionTip = false
Vue.mixin(btnMix) // 这个全局混入
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

效果如下