parent
49d380cf99
commit
fa0241a535
3 changed files with 70 additions and 30 deletions
|
@ -5,12 +5,20 @@
|
|||
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
||||
</div>
|
||||
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
|
||||
<Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
|
||||
<Drop
|
||||
v-else
|
||||
v-show="opened"
|
||||
placement="bottom"
|
||||
transition="slide-up"
|
||||
v-ref:drop
|
||||
:style="dropStyle"><slot></slot></Drop>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { getStyle } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
|
@ -30,7 +38,8 @@
|
|||
return {
|
||||
prefixCls: prefixCls,
|
||||
active: false,
|
||||
opened: false
|
||||
opened: false,
|
||||
dropWidth: parseFloat(getStyle(this.$el, 'width'))
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -49,6 +58,12 @@
|
|||
},
|
||||
accordion () {
|
||||
return this.$parent.accordion;
|
||||
},
|
||||
dropStyle () {
|
||||
let style = {};
|
||||
|
||||
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -94,6 +109,8 @@
|
|||
opened (val) {
|
||||
if (this.mode === 'vertical') return;
|
||||
if (val) {
|
||||
// set drop a width to fixed when menu has fixed position
|
||||
this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
{
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
]
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -61,9 +61,9 @@
|
|||
[`${prefixCls}-star-full`]: full,
|
||||
[`${prefixCls}-star-zero`]: !full
|
||||
}
|
||||
]
|
||||
];
|
||||
},
|
||||
handleMousemove(value, event) {
|
||||
handleMousemove(value) {
|
||||
if (this.disabled) return;
|
||||
|
||||
if (this.allowHalf) {
|
||||
|
@ -91,7 +91,7 @@
|
|||
// this.currentValue = this.value;
|
||||
this.hoverIndex = -1;
|
||||
},
|
||||
handleClick (value) {
|
||||
handleClick () {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,28 +1,51 @@
|
|||
<template>
|
||||
<Menu mode="horizontal" theme="primary" active-key="1">
|
||||
<Submenu key="1">
|
||||
<template slot="title">
|
||||
<Icon type="soup-can-outline"></Icon>
|
||||
数据管理
|
||||
</template>
|
||||
<Menu-group title="使用">
|
||||
<Menu-item key="1-1">新增和启动新增和启动</Menu-item>
|
||||
<Menu-item key="1-2">活跃分析</Menu-item>
|
||||
<Menu-item key="1-3">时段分析</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="留存">
|
||||
<Menu-item key="1-4">用户留存</Menu-item>
|
||||
<Menu-item key="1-5">流失用户</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
<br>
|
||||
<p>切换主题</p>
|
||||
<Radio-group :model.sync="theme1">
|
||||
<Radio value="light"></Radio>
|
||||
<Radio value="dark"></Radio>
|
||||
<Radio value="primary"></Radio>
|
||||
</Radio-group>
|
||||
<div style="margin: 50px;position:relative;top: 0;left: 0;">
|
||||
<Menu mode="horizontal" :theme="theme1" active-key="1">
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Submenu key="3">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析
|
||||
</template>
|
||||
<Menu-group title="使用">
|
||||
<Menu-item key="3-1">新增和新</Menu-item>
|
||||
<Menu-item key="3-2">活跃分析</Menu-item>
|
||||
<Menu-item key="3-3">时段分析</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="留存">
|
||||
<Menu-item key="3-4">用户留存</Menu-item>
|
||||
<Menu-item key="3-5">流失用户</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
<Menu-item key="4">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</Menu-item>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
Loading…
Add table
Reference in a new issue