update Menu style
This commit is contained in:
梁灏
parent
5d6bf568e7
commit
cbaf4e2361
2 changed files with 53 additions and 208 deletions
|
|
@ -1,18 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Menu active-name="1-2" :open-names="['1']">
|
||||||
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange">
|
|
||||||
<Submenu name="1">
|
<Submenu name="1">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<Icon type="ios-analytics"></Icon>
|
<Icon type="ios-analytics"></Icon>
|
||||||
Navigation One
|
Navigation One
|
||||||
</template>
|
</template>
|
||||||
<MenuGroup title="Item 1">
|
<MenuGroup title="Item 1">
|
||||||
<MenuItem name="1-1">Option 1</MenuItem>
|
<MenuItem name="1-1">我是菜单一</MenuItem>
|
||||||
<MenuItem name="1-2">Option 2</MenuItem>
|
<MenuItem name="1-2">我是菜单二</MenuItem>
|
||||||
</MenuGroup>
|
</MenuGroup>
|
||||||
<MenuGroup title="Item 2">
|
<MenuGroup title="Item 2">
|
||||||
<MenuItem name="1-3">Option 3</MenuItem>
|
<MenuItem name="1-3">我是菜单三</MenuItem>
|
||||||
<MenuItem name="1-4">Option 4</MenuItem>
|
<MenuItem name="1-4">我是菜单四</MenuItem>
|
||||||
</MenuGroup>
|
</MenuGroup>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
<Submenu name="2">
|
<Submenu name="2">
|
||||||
|
|
@ -20,194 +19,28 @@
|
||||||
<Icon type="ios-filing"></Icon>
|
<Icon type="ios-filing"></Icon>
|
||||||
Navigation Two
|
Navigation Two
|
||||||
</template>
|
</template>
|
||||||
<MenuItem name="2-1" to="/button">Option 5</MenuItem>
|
<MenuItem name="2-1">我是菜单五</MenuItem>
|
||||||
<MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
|
<MenuItem name="2-2">我是菜单六</MenuItem>
|
||||||
<Submenu name="3">
|
<Submenu name="3">
|
||||||
<template slot="title">Submenu</template>
|
<template slot="title">Submenu</template>
|
||||||
<MenuItem name="3-1">Option 7</MenuItem>
|
<MenuItem name="3-1">我是菜单七</MenuItem>
|
||||||
<MenuItem name="3-2">Option 8</MenuItem>
|
<MenuItem name="3-2">我是菜单八</MenuItem>
|
||||||
|
</Submenu>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
<Submenu name="4">
|
<Submenu name="4">
|
||||||
<template slot="title">Submenu</template>
|
|
||||||
<MenuItem name="4-1">Option 7</MenuItem>
|
|
||||||
<MenuItem name="4-2">Option 8</MenuItem>
|
|
||||||
</Submenu>
|
|
||||||
</Submenu>
|
|
||||||
<Submenu name="5">
|
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<Icon type="ios-gear"></Icon>
|
<Icon type="ios-gear"></Icon>
|
||||||
Navigation Three
|
Navigation Three
|
||||||
</template>
|
</template>
|
||||||
<MenuItem name="5-1">Option 9</MenuItem>
|
<MenuItem name="4-1">Option 9</MenuItem>
|
||||||
<MenuItem name="5-2">Option 10</MenuItem>
|
<MenuItem name="4-2">Option 10</MenuItem>
|
||||||
<MenuItem name="5-3">Option 11</MenuItem>
|
<MenuItem name="4-3">Option 11</MenuItem>
|
||||||
<MenuItem name="5-4">Option 12</MenuItem>
|
<MenuItem name="4-4">Option 12</MenuItem>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
</Menu>
|
</Menu>
|
||||||
<br/>
|
|
||||||
<Menu ref="menu2" theme="dark" accordion :open-names="openNames2" @on-open-change="handleOpenChange">
|
|
||||||
<template v-for="item in menuList">
|
|
||||||
<custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
|
|
||||||
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
|
|
||||||
</template>
|
|
||||||
</Menu>
|
|
||||||
<Button @click="addNewItem">添加菜单项</Button>
|
|
||||||
<Button @click="changeActive">修改激活项</Button>
|
|
||||||
<Button @click="setOpenNames">修改展开数组</Button>
|
|
||||||
<Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
|
|
||||||
<MenuItem name="1">
|
|
||||||
<Icon type="ios-paper"></Icon>
|
|
||||||
内容管理
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem name="2">
|
|
||||||
<Icon type="ios-people"></Icon>
|
|
||||||
用户管理
|
|
||||||
</MenuItem>
|
|
||||||
<Submenu name="3">
|
|
||||||
<template slot="title">
|
|
||||||
<Icon type="stats-bars"></Icon>
|
|
||||||
统计分析
|
|
||||||
</template>
|
|
||||||
<MenuGroup title="使用">
|
|
||||||
<MenuItem name="3-1">新增和启动</MenuItem>
|
|
||||||
<MenuItem name="3-2">活跃分析</MenuItem>
|
|
||||||
<MenuItem name="3-3">时段分析</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
<MenuGroup title="留存">
|
|
||||||
<MenuItem name="3-4">用户留存</MenuItem>
|
|
||||||
<MenuItem name="3-5">流失用户</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
</Submenu>
|
|
||||||
<Submenu name="4">
|
|
||||||
<template slot="title">
|
|
||||||
<Icon type="stats-bars"></Icon>
|
|
||||||
统计分析2
|
|
||||||
</template>
|
|
||||||
<MenuGroup title="使用2">
|
|
||||||
<MenuItem name="4-1">新增和启动2</MenuItem>
|
|
||||||
<MenuItem name="4-2">活跃分析2</MenuItem>
|
|
||||||
<MenuItem name="4-3">时段分析2</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
<MenuGroup title="留存2">
|
|
||||||
<MenuItem name="4-4">用户留存2</MenuItem>
|
|
||||||
<MenuItem name="4-5">流失用户2</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
</Submenu>
|
|
||||||
<MenuItem name="5">
|
|
||||||
<Icon type="settings"></Icon>
|
|
||||||
综合设置
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import custemMenuItem from './custem-menu-item.vue'
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
custemMenuItem
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
openNames: ['1'],
|
|
||||||
openNames2: [],
|
|
||||||
menuList: [
|
|
||||||
{
|
|
||||||
name: '111',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '111-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '111-222'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-222',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-222-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-222-222',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-222-222-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-222-222-222'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-333',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-333-111',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-333-111-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-333-111-222'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-333-222',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-333-222-111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '222-333-222-222'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
activeName: '1'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleOpenChange (name) {
|
|
||||||
console.log(name)
|
|
||||||
},
|
|
||||||
setOpenNames () {
|
|
||||||
this.openNames = ['2', '3'];
|
|
||||||
this.openNames2 = ['222', '222-222', '222-222-222', '222-222-222-111']
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.menu.updateOpened();
|
|
||||||
this.$refs.menu2.updateOpened();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
addNewItem () {
|
|
||||||
this.menuList[1].children[1].children.push({
|
|
||||||
name: '222-222-333',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: '222-222-333-111'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeActive () {
|
|
||||||
this.activeName = String(Number(this.activeName) + 1)
|
|
||||||
},
|
|
||||||
hc (data) {
|
|
||||||
console.log(data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -154,7 +154,8 @@
|
||||||
transition: all @transition-time @ease-in-out;
|
transition: all @transition-time @ease-in-out;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
background: @background-color-select-hover;
|
//background: @background-color-select-hover;
|
||||||
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -193,11 +194,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-light&-vertical &-item{
|
&-light&-vertical &-item{
|
||||||
border-right: 2px solid transparent;
|
//border-right: 2px solid transparent;
|
||||||
&-active:not(.@{menu-prefix-cls}-submenu){
|
&-active:not(.@{menu-prefix-cls}-submenu){
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
border-right: 2px solid @primary-color;
|
background: ~`colorPalette("@{primary-color}", 1)`;
|
||||||
|
//border-right: 2px solid @primary-color;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: @primary-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -214,7 +226,7 @@
|
||||||
}
|
}
|
||||||
&-active:not(.@{menu-prefix-cls}-submenu){
|
&-active:not(.@{menu-prefix-cls}-submenu){
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
border-right: 2px solid @primary-color;
|
//border-right: 2px solid @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-dark&-vertical &-submenu &-item{
|
&-dark&-vertical &-submenu &-item{
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue