no message
Former-commit-id: eefb53c8936b6acd58b0604d25da7cfad73d8791 Former-commit-id: f7a9f9360bbd8e3dca3bba6c12c22775adc2a66e Former-commit-id: f9f204a1e322195ea42d596fb749e31b3859de7f
This commit is contained in:
liyang
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<el-menu-item :index="menu.path">
|
||||
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-menu-item',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<el-submenu :index="menu.path">
|
||||
<template slot="title">
|
||||
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</template>
|
||||
<template v-for="(child, childIndex) in menu.children">
|
||||
<d2-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||
<d2-submenu v-else :menu="child" :key="childIndex"/>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-sub-menu',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-menu-item': () => import('../d2-menu-item/index.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:router="true">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menus from '@/menu/index.js'
|
||||
export default {
|
||||
name: 'd2-layout-main-header-menu',
|
||||
components: {
|
||||
'd2-menu-item': () => import('../d2-menu-item/index.vue'),
|
||||
'd2-sub-menu': () => import('../d2-sub-menu/index.vue')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="isFullScreen ? '退出全屏' : '全屏'"
|
||||
placement="bottom">
|
||||
<el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
|
||||
<d2-icon v-if="isFullScreen" name="compress"></d2-icon>
|
||||
<d2-icon v-else name="arrows-alt"></d2-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
isFullScreen: state => state.fullScreen.isFullScreen
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'toggleFullScreen'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<el-dropdown class="d2-mr">
|
||||
<span class="el-dropdown-link">你好</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"></d2-icon> 注销</el-dropdown-item>
|
||||
<el-dropdown-item><d2-icon name="user-circle-o"></d2-icon> 个人中心</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
methods: {
|
||||
logOff () {
|
||||
this.$confirm('注销此账户吗?', '注销', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 删除cookie
|
||||
Cookies.remove('token')
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
})
|
||||
}).catch(() => {
|
||||
// 取消了注销
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="d2-header-right">
|
||||
<FullScreen></FullScreen>
|
||||
<UserDropdown></UserDropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-layout-main-header-right',
|
||||
components: {
|
||||
FullScreen: () => import('./components/FullScreen.vue'),
|
||||
UserDropdown: () => import('./components/UserDropdown.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-menu
|
||||
:collapse="collapse"
|
||||
:unique-opened="true"
|
||||
:router="true">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-side-menu-empty">
|
||||
没有菜单
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { side } from '@/menu/index.js'
|
||||
export default {
|
||||
name: 'd2-layout-main-side-menu',
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-menu-item': () => import('../d2-menu-item/index.vue'),
|
||||
'd2-sub-menu': () => import('../d2-sub-menu/index.vue')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.matched': {
|
||||
handler (val) {
|
||||
const path = val[0].path
|
||||
this.menus = side.filter(menu => menu.path === path)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
src/components/core/d2-layout-main/index.vue
Normal file
54
src/components/core/d2-layout-main/index.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<el-container class="layout-main theme">
|
||||
<!-- 顶栏 -->
|
||||
<el-header>
|
||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<img v-if="collapse" src="@/assets/image/logo/header-icon-only.png">
|
||||
<img v-else src="@/assets/image/logo/header.png">
|
||||
</div>
|
||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
||||
<d2-icon name="bars"/>
|
||||
</div>
|
||||
<d2-layout-main-header-menu/>
|
||||
<d2-layout-main-header-right/>
|
||||
</el-header>
|
||||
<!-- 下面 主体 -->
|
||||
<el-container>
|
||||
<!-- 主体 侧边栏 -->
|
||||
<el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<d2-layout-main-side-menu :collapse="collapse"/>
|
||||
</el-aside>
|
||||
<!-- 主体 -->
|
||||
<el-main>
|
||||
<transition name="fade-transverse">
|
||||
<router-view/>
|
||||
</transition>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-layout-main',
|
||||
components: {
|
||||
'd2-layout-main-side-menu': () => import('./components/side-menu'),
|
||||
'd2-layout-main-header-menu': () => import('./components/header-menu'),
|
||||
'd2-layout-main-header-right': () => import('./components/header-right')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
// [侧边栏宽度] 正常状态
|
||||
asideWidth: '200px',
|
||||
// [侧边栏宽度] 折叠状态
|
||||
asideWidthCollapse: '65px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 主题
|
||||
@import '~@/assets/style/theme/star/index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user