Tabs add global setting, #5592

梁灏
1 parent 154bb822
Showing 3 changed files with 44 additions and 4 deletions Show diff stats
src/components/tabs/tabs.vue
src/index.js
src/styles/components/tabs.less
@@ -19,7 +19,7 @@
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                 <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                 <template v-else>{{ item.label }}</template>
-                                <Icon v-if="showClose(item)" type="ios-close" @click.native.stop="handleRemove(index)"></Icon>
+                                <Icon :class="[prefixCls + '-close']" v-if="showClose(item)" :type="arrowType" :custom="customArrowType" :size="arrowSize" @click.native.stop="handleRemove(index)"></Icon>
                             </div>
                         </div>
                     </div>
@@ -169,6 +169,41 @@
                 }
  
                 return style;
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = 'ios-close';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tabs.customCloseIcon) {
+                        type = '';
+                    } else if (this.$IVIEW.tabs.closeIcon) {
+                        type = this.$IVIEW.tabs.closeIcon;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tabs.customCloseIcon) {
+                        type = this.$IVIEW.tabs.customCloseIcon;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tabs.closeIconSize) {
+                        size = this.$IVIEW.tabs.closeIconSize;
+                    }
+                }
+                return size;
             }
         },
         methods: {
@@ -211,6 +211,11 @@ const install = function(Vue, opts = {}) {
             icon: opts.timePicker ? opts.timePicker.icon ? opts.timePicker.icon : '' : '',
             customIcon: opts.timePicker ? opts.timePicker.customIcon ? opts.timePicker.customIcon : '' : '',
             iconSize: opts.timePicker ? opts.timePicker.iconSize ? opts.timePicker.iconSize : '' : ''
+        },
+        tabs: {
+            closeIcon: opts.tabs ? opts.tabs.closeIcon ? opts.tabs.closeIcon : '' : '',
+            customCloseIcon: opts.tabs ? opts.tabs.customCloseIcon ? opts.tabs.customCloseIcon : '' : '',
+            closeIconSize: opts.tabs ? opts.tabs.closeIconSize ? opts.tabs.closeIconSize : '' : ''
         }
     };
  
@@ -203,7 +203,7 @@
     &&-card > &-bar &-nav-wrap {
         margin-bottom: 0;
     }
-    &&-card > &-bar &-tab .@{css-prefix-iconfont}-ios-close {
+    &&-card > &-bar &-tab &-close {
         width: 0;
         height: 22px;
         font-size: 22px;
@@ -221,8 +221,8 @@
         }
     }
  
-    &&-card > &-bar &-tab-active .@{css-prefix-iconfont}-ios-close,
-    &&-card > &-bar &-tab:hover .@{css-prefix-iconfont}-ios-close {
+    &&-card > &-bar &-tab-active &-close,
+    &&-card > &-bar &-tab:hover &-close {
         width: 22px;
         transform: translateZ(0);
         margin-right: -6px;