优化
Former-commit-id: 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 95caeef047c0671c5888416269f14b02f1901efe [formerly b07d79ab403f2d54110a4f2b0517f84f31a3e626]]]]] Former-commit-id: 0bdb267c08ca3fa5724ac191da95e328780f9631 Former-commit-id: a55782f9bd52e1db4add37c141fd8aee863cf436 Former-commit-id: f9f1180a18246208a8c268689f7b3316dcb1cc54 [formerly b5c2f9ae7d07b86e84d87f13ec40dfa37d5e876c] Former-commit-id: b1b9ecb9d12c8520c02f2ce10a0a7feb30a10f04 Former-commit-id: 5c344f906ccdc1bb33537959621a6f7e864b3ea4 Former-commit-id: 19bb1c83218a59143ab0563bd427bda85d7aede9 Former-commit-id: e75d98106a692cb9926921abeae6e424a2a6cef7 Former-commit-id: 718eb8c888c8c2518dee4ed6c909d1928c2217f4
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="d2-layout-header-aside-menu-side">
|
<div class="d2-layout-header-aside-menu-side">
|
||||||
<el-menu
|
<el-menu
|
||||||
:collapse="collapse"
|
:collapse="isMenuAsideCollapse"
|
||||||
:unique-opened="true"
|
:unique-opened="true"
|
||||||
:default-active="active"
|
:default-active="active"
|
||||||
ref="menu"
|
ref="menu"
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||||
</template>
|
</template>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
<div v-if="menusAside.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
|
<div v-if="menusAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
|
||||||
<d2-icon name="hdd-o"/>
|
<d2-icon name="hdd-o"/>
|
||||||
<span>当前目录没有菜单</span>
|
<span>当前目录没有菜单</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -33,13 +33,6 @@ export default {
|
|||||||
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
|
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
|
||||||
'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
|
'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
|
||||||
},
|
},
|
||||||
props: {
|
|
||||||
collapse: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
active: '',
|
active: '',
|
||||||
@@ -49,12 +42,13 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
menusAside: state => state.d2admin.menusAside
|
menusAside: state => state.d2admin.menusAside,
|
||||||
|
isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 折叠和展开菜单的时候销毁 better scroll
|
// 折叠和展开菜单的时候销毁 better scroll
|
||||||
collapse (val) {
|
isMenuAsideCollapse (val) {
|
||||||
this.scrollDestroy()
|
this.scrollDestroy()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.scrollInit()
|
this.scrollInit()
|
||||||
|
|||||||
@@ -9,11 +9,11 @@
|
|||||||
<div class="d2-layout-header-aside-content">
|
<div class="d2-layout-header-aside-content">
|
||||||
<!-- 顶栏 -->
|
<!-- 顶栏 -->
|
||||||
<div class="d2-theme-header">
|
<div class="d2-theme-header">
|
||||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
<div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
|
||||||
<img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
<img v-if="isMenuAsideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||||
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||||
</div>
|
</div>
|
||||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
<div class="toggle-aside-btn" @click="handleToggleAside">
|
||||||
<d2-icon name="bars"/>
|
<d2-icon name="bars"/>
|
||||||
</div>
|
</div>
|
||||||
<d2-menu-header/>
|
<d2-menu-header/>
|
||||||
@@ -28,8 +28,8 @@
|
|||||||
<!-- 下面 主体 -->
|
<!-- 下面 主体 -->
|
||||||
<div class="d2-theme-container">
|
<div class="d2-theme-container">
|
||||||
<!-- 主体 侧边栏 -->
|
<!-- 主体 侧边栏 -->
|
||||||
<div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
<div ref="aside" class="d2-theme-container-aside" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
|
||||||
<d2-menu-side :collapse="collapse"/>
|
<d2-menu-side/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 主体 -->
|
<!-- 主体 -->
|
||||||
<div class="d2-theme-container-main">
|
<div class="d2-theme-container-main">
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="d2-theme-container-main-body">
|
<div class="d2-theme-container-main-body">
|
||||||
<transition name="fade-transverse">
|
<transition name="fade-transverse">
|
||||||
<keep-alive :include="keepAliveList">
|
<keep-alive :include="d2adminKeepAliveList">
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapGetters } from 'vuex'
|
import { mapState, mapGetters, mapMutations } from 'vuex'
|
||||||
|
|
||||||
import menuSide from './components/menu-side'
|
import menuSide from './components/menu-side'
|
||||||
import menuHeader from './components/menu-header'
|
import menuHeader from './components/menu-header'
|
||||||
@@ -73,7 +73,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
collapse: false,
|
|
||||||
// [侧边栏宽度] 正常状态
|
// [侧边栏宽度] 正常状态
|
||||||
asideWidth: '200px',
|
asideWidth: '200px',
|
||||||
// [侧边栏宽度] 折叠状态
|
// [侧边栏宽度] 折叠状态
|
||||||
@@ -83,17 +82,13 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
isGrayMode: state => state.d2admin.isGrayMode,
|
isGrayMode: state => state.d2admin.isGrayMode,
|
||||||
pageOpenedList: state => state.d2admin.pageOpenedList
|
pageOpenedList: state => state.d2admin.pageOpenedList,
|
||||||
|
isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
|
||||||
}),
|
}),
|
||||||
...mapGetters([
|
...mapGetters([
|
||||||
'themeActiveSetting'
|
'themeActiveSetting',
|
||||||
|
'd2adminKeepAliveList'
|
||||||
]),
|
]),
|
||||||
/**
|
|
||||||
* @description 返回现在需要缓存的页面 name 数组
|
|
||||||
*/
|
|
||||||
keepAliveList () {
|
|
||||||
return this.pageOpenedList.filter(item => !(item.meta && item.meta.notCache)).map(e => e.name)
|
|
||||||
},
|
|
||||||
/**
|
/**
|
||||||
* @description 最外层容器的背景图片样式
|
* @description 最外层容器的背景图片样式
|
||||||
*/
|
*/
|
||||||
@@ -104,6 +99,17 @@ export default {
|
|||||||
} : {}
|
} : {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
'd2adminMenuAsideCollapseToggle'
|
||||||
|
]),
|
||||||
|
/**
|
||||||
|
* 接收点击切换侧边栏的按钮
|
||||||
|
*/
|
||||||
|
handleToggleAside () {
|
||||||
|
this.d2adminMenuAsideCollapseToggle()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="card">
|
<d2-container>
|
||||||
<template slot="header">这个页面不会被 keep-alive</template>
|
<template slot="header">这个页面不会被 keep-alive</template>
|
||||||
<p class="d2-mt-0">在下面的输入框输入任意字符后,切换到其它页面,再回到此页时输入框文字消失,证明没有被缓存</p>
|
<p class="d2-mt-0">在下面的输入框输入任意字符后,切换到其它页面,再回到此页时输入框文字消失,证明没有被缓存</p>
|
||||||
<el-input v-model="value" placeholder="input here"></el-input>
|
<el-input v-model="value" placeholder="input here"></el-input>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="card">
|
<d2-container>
|
||||||
<template slot="header">这个页面会被 keep-alive</template>
|
<template slot="header">这个页面会被 keep-alive</template>
|
||||||
<p class="d2-mt-0">在下面的输入框输入任意字符后,切换到其它页面,再回到此页时输入框文字保留,证明被缓存</p>
|
<p class="d2-mt-0">在下面的输入框输入任意字符后,切换到其它页面,再回到此页时输入框文字保留,证明被缓存</p>
|
||||||
<el-input v-model="value" placeholder="input here"></el-input>
|
<el-input v-model="value" placeholder="input here"></el-input>
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
e771f2f57cedfc8d2e3e0a07a9b4f1f0ada4f152
|
036efa02a01b2165111fbf85c475eb625e962c2c
|
||||||
Reference in New Issue
Block a user