当启用了'侧边栏自动隐藏'时,不渲染侧边栏折叠按钮

master
toesbieya 6 years ago
parent 2ee7c2da00
commit 63d47b0fae
  1. 5
      vue/src/layout/component/Navbar/component/Hamburger.vue
  2. 10
      vue/src/layout/component/Navbar/index.vue
  3. 4
      vue/src/layout/component/Sidebar/index.vue

@ -4,10 +4,11 @@ export default {
functional: true, functional: true,
props: {active: Boolean}, props: {render: Boolean, active: Boolean},
render(h, context) { render(h, context) {
const {active} = context.props const {render, active} = context.props
if (!render) return
const className = `navbar-icon el-icon-s-unfold hamburger ${active ? 'is-active' : ''}` const className = `navbar-icon el-icon-s-unfold hamburger ${active ? 'is-active' : ''}`
return ( return (
<div {...context.data} title={`${active ? '折叠' : '展开'}侧边栏`}> <div {...context.data} title={`${active ? '折叠' : '展开'}侧边栏`}>

@ -1,7 +1,7 @@
<template> <template>
<nav class="navbar"> <nav class="navbar">
<div style="width: 30%"> <div style="width: 30%">
<hamburger class="navbar-item" :active="!sidebarCollapse" @click="sidebarCtrl"/> <hamburger class="navbar-item" :render="renderHamburger" :active="!sidebarCollapse" @click="sidebarCtrl"/>
<breadcrumb v-if="showBreadcrumb"/> <breadcrumb v-if="showBreadcrumb"/>
@ -67,11 +67,17 @@ export default {
data: () => ({settingDrawer: false}), data: () => ({settingDrawer: false}),
computed: { computed: {
...mapState('app', ['device']),
...mapState('resource', ['activeRootMenu', 'menus']), ...mapState('resource', ['activeRootMenu', 'menus']),
...mapState('user', ['avatar', 'name', 'prepareLogout']), ...mapState('user', ['avatar', 'name', 'prepareLogout']),
...mapState('setting', ['sidebarCollapse', 'showBreadcrumb']) ...mapState('setting', ['sidebarAutoHidden', 'sidebarCollapse', 'showBreadcrumb']),
renderHamburger() {
return !(this.device === 'pc' && this.sidebarAutoHidden)
}
}, },
methods: { methods: {

@ -35,10 +35,10 @@ export default {
}, },
// //
// //pc
// //
hideSidebar() { hideSidebar() {
return this.sidebarAutoHidden && this.mouseOutside return this.sidebarAutoHidden && this.mouseOutside && this.device === 'pc'
|| this.sidebarCollapse && this.device === 'mobile' || this.sidebarCollapse && this.device === 'mobile'
}, },

Loading…
Cancel
Save