在element-ui組件注冊之前，對其進行調整

 拿button組件舉例

 

 

。

 

 

 

 button.vue     v-bind="$attrs"  讓子組件擁有父組件所有的attr屬性 （props除外）   v-on="$listeners"   讓子組件擁有所有父組件的事件（這個必須有，否則點擊父組件不會觸發事件）

 

<template>
    <Button 
        v-if="pagePermission[$attrs.name] != false"
        :disabled="disabled"
        v-bind="$attrs"
        v-on="$listeners">
        <slot></slot>
    </Button>
</template>

<script>
import {Button} from "element-ui";
import { mapState } from 'vuex';
export default {
    name:"el-button",
    components:{
        Button
    },
    props:{
        disabled:{
            // 按鈕是否可以點擊
            type:Boolean,
            default:false
        }
    },
    computed:{
        ...mapState(['pagePermission']),
    }
}
</script>

 

 

 

 

index.js

import elButton from "./button.vue"


elButton.install = function(Vue) {
    Vue.component(elButton.name, elButton);
};

export default elButton;

然后在main.js中引入：

import elButton from "@/ai-comp/el-button/index.js"

注冊：

Vue.use(elButton)

這種場景適合在老項目中對項目中已經使用的組件進行二次封裝，這種方式不會影響以前的二次封裝！！！

 

 

 

 

。