1. init button 处理

src/installer/index.ts

@@ -50,7 +50,8 @@ import {
 import Vue, { VueConstructor } from 'vue';
 import './lodash';
 import 'element-ui/lib/theme-chalk/index.css';
-import Button from "@/core-ui/component/element-ui/button.vue";
+
+import MgButton from "@/views/components/components/mg-button.vue";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const scrollbar = require('element-ui/lib/scrollbar');
 
@@ -80,8 +81,7 @@ locale.el.pagination.pageClassifier = '';
 
 Vue.component('el-autocomplete', Autocomplete);
 Vue.component('el-scrollbar', scrollbar.default);
-Vue.component('com-button', Button);
-
+Vue.component('mg-button', MgButton);
 
 Vue.use(Avatar);
 Vue.use(Pagination);

src/views/components/components/mg-button.vue

+<template>
+    <Button v-bind="$attrs" v-on="$listeners" :size="size">
+        <slot></slot>
+    </Button>
+</template>
+
+<script lang="ts">
+    import { Component, Vue, Prop } from "vue-property-decorator";
+    import Button from "@/core-ui/component/element-ui/button.vue";
+    /**
+     * 支持的 size 值，默认值为 default
+     */
+    const BUTTON_SIZES = ["extra-large", "large", "default", "medium", "small"];
+
+    @Component({ components: { Button } })
+    export default class MgButton extends Vue {
+        @Prop({
+            required: false,
+            default: "medium",
+            validator: (v) => !v || BUTTON_SIZES.indexOf(v) > -1,
+        })
+        private size!: string;
+    }
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+</style>

src/views/pages/employ-management/address-book/employ-list.vue

@@ -24,21 +24,15 @@
             <div
                 class="list_title d-flex align-items-center justify-content-end"
             >
-                <com-button size="medium" type="primary" @click="addMemberBtn">
+                <mg-button type="primary" @click="addMemberBtn">
                     添加员工
-                </com-button>
-                <com-button size="medium" @click="exportMembers">
-                    批量导入
-                </com-button>
-                <com-button size="medium" @click="outFile">
-                    批量导出
-                </com-button>
-                <com-button size="medium" @click="handleDelete('disable')">
+                </mg-button>
+                <mg-button @click="exportMembers"> 批量导入 </mg-button>
+                <mg-button @click="outFile"> 批量导出 </mg-button>
+                <mg-button @click="handleDelete('disable')">
                     禁用员工
-                </com-button>
-                <com-button size="medium" @click="handleDelete('del')">
-                    删除员工
-                </com-button>
+                </mg-button>
+                <mg-button @click="handleDelete('del')"> 删除员工 </mg-button>
             </div>
             <div class="table-container flex-fill d-flex flex-column">
                 <el-table