This commit is contained in:
hh
parent
bc7483cdb2
commit
1963108a29
|
|
@ -1,181 +1,202 @@
|
||||||
<template>
|
<template>
|
||||||
<a-layout-sider
|
<a-layout-sider :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
|
||||||
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
|
width="160px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
|
||||||
width="120px"
|
|
||||||
:collapsible="collapsible"
|
|
||||||
v-model="collapsed"
|
|
||||||
:trigger="null">
|
|
||||||
<logo />
|
<logo />
|
||||||
<s-menu
|
<s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" @updateMenuTitle="onUpdateMenuTitle"
|
||||||
:collapsed="collapsed"
|
:mode="mode" :style="smenuStyle">
|
||||||
:menu="menus"
|
|
||||||
:theme="theme"
|
|
||||||
@select="onSelect"
|
|
||||||
@updateMenuTitle="onUpdateMenuTitle"
|
|
||||||
:mode="mode"
|
|
||||||
:style="smenuStyle">
|
|
||||||
</s-menu>
|
</s-menu>
|
||||||
|
<a-button type="link" style="padding-left: 50px;padding-right: 50px;"
|
||||||
|
@click="handleLogout">
|
||||||
|
退出登录
|
||||||
|
</a-button>
|
||||||
</a-layout-sider>
|
</a-layout-sider>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
|
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
|
||||||
import Logo from '../tools/Logo'
|
import Logo from '../tools/Logo'
|
||||||
import SMenu from './index'
|
import SMenu from './index'
|
||||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
import { mapActions, mapGetters, mapState } from 'vuex'
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SideMenu",
|
name: "SideMenu",
|
||||||
components: { ALayoutSider, Logo, SMenu },
|
components: { ALayoutSider, Logo, SMenu },
|
||||||
mixins: [mixin, mixinDevice],
|
mixins: [mixin, mixinDevice],
|
||||||
props: {
|
props: {
|
||||||
mode: {
|
mode: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: 'inline'
|
default: 'inline'
|
||||||
},
|
|
||||||
theme: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: 'dark'
|
|
||||||
},
|
|
||||||
collapsible: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
collapsed: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
menus: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed:{
|
theme: {
|
||||||
smenuStyle() {
|
type: String,
|
||||||
let style = { 'padding': '0' }
|
required: false,
|
||||||
if (this.fixSiderbar) {
|
default: 'dark'
|
||||||
style['height'] = 'calc(100% - 59px)'
|
|
||||||
style['overflow'] = 'auto'
|
|
||||||
style['overflow-x'] = 'hidden'
|
|
||||||
}
|
|
||||||
return style
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
collapsible: {
|
||||||
onSelect (obj) {
|
type: Boolean,
|
||||||
this.$emit('menuSelect', obj)
|
required: false,
|
||||||
},
|
default: false
|
||||||
onUpdateMenuTitle (obj) {
|
},
|
||||||
this.$emit('updateMenuTitle', obj)
|
collapsed: {
|
||||||
}
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
menus: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
smenuStyle() {
|
||||||
|
let style = { 'padding': '0' }
|
||||||
|
if (this.fixSiderbar) {
|
||||||
|
style['height'] = 'calc(100% - 59px)'
|
||||||
|
style['overflow'] = 'auto'
|
||||||
|
style['overflow-x'] = 'hidden'
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSelect(obj) {
|
||||||
|
this.$emit('menuSelect', obj)
|
||||||
|
},
|
||||||
|
onUpdateMenuTitle(obj) {
|
||||||
|
this.$emit('updateMenuTitle', obj)
|
||||||
|
},
|
||||||
|
...mapActions(["Logout"]),
|
||||||
|
handleLogout() {
|
||||||
|
const that = this
|
||||||
|
this.$confirm({
|
||||||
|
title: '提示',
|
||||||
|
content: '您确定要退出登录吗',
|
||||||
|
onOk() {
|
||||||
|
return that.Logout({}).then(() => {
|
||||||
|
window.location.reload()
|
||||||
|
}).catch(err => {
|
||||||
|
that.$message.error({
|
||||||
|
title: '错误',
|
||||||
|
description: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
||||||
|
.sider {
|
||||||
|
@scrollBarSize: 10px;
|
||||||
|
|
||||||
/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
ul.ant-menu {
|
||||||
.sider {
|
|
||||||
@scrollBarSize: 10px;
|
|
||||||
|
|
||||||
ul.ant-menu {
|
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||||
|
&::-webkit-scrollbar {
|
||||||
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
width: @scrollBarSize;
|
||||||
&::-webkit-scrollbar {
|
height: @scrollBarSize;
|
||||||
width: @scrollBarSize;
|
background-color: transparent;
|
||||||
height: @scrollBarSize;
|
display: none;
|
||||||
background-color: transparent;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .-o-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 兼容IE */
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
-ms-scroll-chaining: chained;
|
|
||||||
-ms-content-zooming: zoom;
|
|
||||||
-ms-scroll-rails: none;
|
|
||||||
-ms-content-zoom-limit-min: 100%;
|
|
||||||
-ms-content-zoom-limit-max: 500%;
|
|
||||||
-ms-scroll-snap-type: proximity;
|
|
||||||
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
|
|
||||||
|
|
||||||
/* 定义滚动条轨道 */
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 定义滑块 */
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: @scrollBarSize;
|
|
||||||
background-color: #eee;
|
|
||||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: #bbbbbb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 暗色系滚动条样式 */
|
& .-o-scrollbar {
|
||||||
&.dark ul.ant-menu {
|
display: none;
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #666666;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #808080;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 兼容IE */
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
-ms-scroll-chaining: chained;
|
||||||
|
-ms-content-zooming: zoom;
|
||||||
|
-ms-scroll-rails: none;
|
||||||
|
-ms-content-zoom-limit-min: 100%;
|
||||||
|
-ms-content-zoom-limit-max: 500%;
|
||||||
|
-ms-scroll-snap-type: proximity;
|
||||||
|
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
|
||||||
|
|
||||||
|
/* 定义滚动条轨道 */
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义滑块 */
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: @scrollBarSize;
|
||||||
|
background-color: #eee;
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #bbbbbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
/** 暗色系滚动条样式 */
|
||||||
|
&.dark ul.ant-menu {
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #666666;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
// 选中首页的时候不显示背景颜色，只应用于左侧菜单
|
// 选中首页的时候不显示背景颜色，只应用于左侧菜单
|
||||||
.sider .ant-menu.ant-menu-root {
|
.sider .ant-menu.ant-menu-root {
|
||||||
& > .ant-menu-item:first-child {
|
&>.ant-menu-item:first-child {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
& > a, & > a:hover {
|
&>a,
|
||||||
color: rgba(0, 0, 0, 0.65);
|
&>a:hover {
|
||||||
}
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
|
||||||
&.ant-menu-item-selected {
|
|
||||||
& > a, & > a:hover {
|
|
||||||
color: @primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ant-menu-dark > .ant-menu-item:first-child {
|
&.ant-menu-item-selected {
|
||||||
& > a, & > a:hover {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ant-menu-item-selected {
|
&>a,
|
||||||
& > a, & > a:hover {
|
&>a:hover {
|
||||||
color: rgba(255, 255, 255, 1);
|
color: @primary-color;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.ant-menu-dark>.ant-menu-item:first-child {
|
||||||
|
|
||||||
|
&>a,
|
||||||
|
&>a:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-menu-item-selected {
|
||||||
|
|
||||||
|
&>a,
|
||||||
|
&>a:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<a-layout class="layout" :class="[device]">
|
<a-layout class="layout" :class="[device]">
|
||||||
|
|
||||||
<template v-if="layoutMode === 'sidemenu'">
|
<template>
|
||||||
<a-drawer
|
|
||||||
v-if="device === 'mobile'"
|
|
||||||
:wrapClassName="'drawer-sider ' + navTheme"
|
|
||||||
placement="left"
|
|
||||||
@close="() => this.collapsed = false"
|
|
||||||
:closable="false"
|
|
||||||
:visible="collapsed"
|
|
||||||
width="200px"
|
|
||||||
>
|
|
||||||
<side-menu
|
|
||||||
mode="inline"
|
|
||||||
v-if="device === 'mobile'"
|
|
||||||
:menus="menus"
|
|
||||||
@menuSelect="menuSelect"
|
|
||||||
@updateMenuTitle="handleUpdateMenuTitle"
|
|
||||||
:theme="navTheme"
|
|
||||||
:collapsed="false"
|
|
||||||
:collapsible="true"></side-menu>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
<side-menu
|
<side-menu
|
||||||
v-show="device === 'desktop'"
|
v-show="device === 'desktop'"
|
||||||
mode="inline"
|
mode="inline"
|
||||||
|
|
@ -32,27 +12,6 @@
|
||||||
:collapsed="collapsed"
|
:collapsed="collapsed"
|
||||||
:collapsible="true"></side-menu>
|
:collapsible="true"></side-menu>
|
||||||
</template>
|
</template>
|
||||||
<!-- 下次优化这些代码 -->
|
|
||||||
<template v-else>
|
|
||||||
<a-drawer
|
|
||||||
v-if="device === 'mobile'"
|
|
||||||
:wrapClassName="'drawer-sider ' + navTheme"
|
|
||||||
placement="left"
|
|
||||||
@close="() => this.collapsed = false"
|
|
||||||
:closable="false"
|
|
||||||
:visible="collapsed"
|
|
||||||
width="200px"
|
|
||||||
>
|
|
||||||
<side-menu
|
|
||||||
mode="inline"
|
|
||||||
:menus="menus"
|
|
||||||
@menuSelect="menuSelect"
|
|
||||||
@updateMenuTitle="handleUpdateMenuTitle"
|
|
||||||
:theme="navTheme"
|
|
||||||
:collapsed="false"
|
|
||||||
:collapsible="true"></side-menu>
|
|
||||||
</a-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<a-layout
|
<a-layout
|
||||||
:class="[layoutMode, `content-width-${contentWidth}`]"
|
:class="[layoutMode, `content-width-${contentWidth}`]"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue