menu add global setting #5592

This commit is contained in:
梁灏 2019-04-09 21:12:22 +08:00
parent 3679837be4
commit d082f8ccc9
3 changed files with 53 additions and 5 deletions

View file

@ -2,7 +2,7 @@
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle"> <div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle">
<slot name="title"></slot> <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> </div>
<collapse-transition v-if="mode === 'vertical'"> <collapse-transition v-if="mode === 'vertical'">
<ul :class="[prefixCls]" v-show="opened"><slot></slot></ul> <ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
@ -75,6 +75,41 @@
return this.hasParentSubmenu && this.mode !== 'horizontal' ? { return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' 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: { methods: {

View file

@ -178,6 +178,11 @@ const install = function(Vue, opts = {}) {
arrow: opts.cell ? opts.cell.arrow ? opts.cell.arrow : '' : '', arrow: opts.cell ? opts.cell.arrow ? opts.cell.arrow : '' : '',
customArrow: opts.cell ? opts.cell.customArrow ? opts.cell.customArrow : '' : '', customArrow: opts.cell ? opts.cell.customArrow ? opts.cell.customArrow : '' : '',
arrowSize: opts.cell ? opts.cell.arrowSize ? opts.cell.arrowSize : '' : '' 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 : '' : ''
} }
}; };

View file

@ -160,16 +160,24 @@
} }
&-vertical &-submenu-title-icon{ &-vertical &-submenu-title-icon{
float: right; // #5592 支持自定义图标 size 后,换一种位置
position: relative; //float: right;
top: 4px; //position: relative;
//top: 4px;
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
} }
&-submenu-title-icon { &-submenu-title-icon {
transition: transform @transition-time @ease-in-out; transition: transform @transition-time @ease-in-out;
} }
&-opened > * > &-submenu-title-icon{ &-horizontal &-opened > * > &-submenu-title-icon{
transform: rotate(180deg); transform: rotate(180deg);
} }
&-vertical &-opened > * > &-submenu-title-icon{
transform: translateY(-50%) rotate(180deg);
}
&-vertical &-submenu{ &-vertical &-submenu{
&-nested{ &-nested{