menu add global setting #5592

梁灏
1 parent 3679837b
Showing 3 changed files with 53 additions and 5 deletions Show diff stats
src/components/menu/submenu.vue
src/index.js
src/styles/components/menu.less
@@ -2,7 +2,7 @@
     <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
         <div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle">
             <slot name="title"></slot>
-            <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
+            <Icon :type="arrowType" :custom="customArrowType" :size="arrowSize" :class="[prefixCls + '-submenu-title-icon']" />
         </div>
         <collapse-transition v-if="mode === 'vertical'">
             <ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
@@ -75,6 +75,41 @@
                 return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
                     paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
                 } : {};
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = 'ios-arrow-down';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.menu.customArrow) {
+                        type = '';
+                    } else if (this.$IVIEW.menu.arrow) {
+                        type = this.$IVIEW.menu.arrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.menu.customArrow) {
+                        type = this.$IVIEW.menu.customArrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.menu.arrowSize) {
+                        size = this.$IVIEW.menu.arrowSize;
+                    }
+                }
+                return size;
             }
         },
         methods: {
@@ -178,6 +178,11 @@ const install = function(Vue, opts = {}) {
             arrow: opts.cell ? opts.cell.arrow ? opts.cell.arrow : '' : '',
             customArrow: opts.cell ? opts.cell.customArrow ? opts.cell.customArrow : '' : '',
             arrowSize: opts.cell ? opts.cell.arrowSize ? opts.cell.arrowSize : '' : ''
+        },
+        menu: {
+            arrow: opts.menu ? opts.menu.arrow ? opts.menu.arrow : '' : '',
+            customArrow: opts.menu ? opts.menu.customArrow ? opts.menu.customArrow : '' : '',
+            arrowSize: opts.menu ? opts.menu.arrowSize ? opts.menu.arrowSize : '' : ''
         }
     };
  
@@ -160,16 +160,24 @@
     }
  
     &-vertical &-submenu-title-icon{
-        float: right;
-        position: relative;
-        top: 4px;
+        // #5592 支持自定义图标 size 后，换一种位置
+        //float: right;
+        //position: relative;
+        //top: 4px;
+        position: absolute;
+        top: 50%;
+        right: 24px;
+        transform: translateY(-50%);
     }
     &-submenu-title-icon {
         transition: transform @transition-time @ease-in-out;
     }
-    &-opened > * > &-submenu-title-icon{
+    &-horizontal &-opened > * > &-submenu-title-icon{
         transform: rotate(180deg);
     }
+    &-vertical &-opened > * > &-submenu-title-icon{
+        transform: translateY(-50%) rotate(180deg);
+    }
  
     &-vertical &-submenu{
         &-nested{