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:
liyang
2018-07-21 09:51:06 +08:00
parent 07dc8bf834
commit 9fe6f4d3a1
5 changed files with 30 additions and 30 deletions

View File

@@ -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()

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -1 +1 @@
e771f2f57cedfc8d2e3e0a07a9b4f1f0ada4f152 036efa02a01b2165111fbf85c475eb625e962c2c