element-ui 的el-button組件中添加自定義顏色和圖標

我使用的element-ui的版本是V1.4.13。

如上圖所示，若是使用el-button,加顏色是能夠經過設置type屬性的值，加圖標就設置icon屬性的值。

如今產品給了一個需求，就是自定義的不少種類別，不一樣的類別的按鈕顯示不一樣的顏色和圖標。以下圖所示：

爲了方便開發，目前的解決方案是：添加一個自定義全局指令，同時在element-ui源碼中，加入對應的組件。開發人員在開發時只要在type中添加不一樣的類的值，就能添加上顏色和圖標。

一、在element-ui的button源碼中加了自定義指令otherRender，以及一個局部組件vRender

二、局部組件vRender的寫法：

這裏不懂的能夠看下 https://cn.vuejs.org/v2/guide/render-function.html中的函數式組件

三、自定義指令otherRender，寫在項目公共的js中。這裏我先將全部的類對應的顏色類和圖標定義好。css樣式是根據需求自定義的

而後再在指令中循環添加

Vue.directive('otherRender', {
    inserted:function(el, name, vm) {
        var slotDefault = vm.context.$slots.default;
        var className = el.getAttribute('class').split(' ');
        var icon = '';
        var vClass = '';
        var type = vm.context.type;
        //此處循環添加類和圖標
        AllBtnName.forEach(function(item){
            if( type.indexOf(item.type) !=-1){
                vClass = item.class;
                icon = item.icon;
            }
        });
        // className.push(vClass);
        vm.context.customClass.push(vClass);
        // el.setAttribute('class', className.join(' '));
        vm.context.otherRender = function(h, ctx) {
            return h('i', {
                class: icon
            });
        }
    }
});

在使用el-button時只要添加對應的type值就能使用，對應的顏色和圖標就會顯示了

轉載請註明出處：http://www.javashuo.com/article/p-gnjycfpc-ez.html