From 17792a8900da5a2dbdc32c1dd865a92c027a1ca6 Mon Sep 17 00:00:00 2001 From: ColorWhiteDeveloper <2632970487@qq.com> Date: 星期一, 19 九月 2022 11:02:50 +0800 Subject: [PATCH] 系统框架重新搭建 --- src/views/layout/components/NavBar/index.vue | 112 +++++++++++++++++++++++--------------------------------- 1 files changed, 46 insertions(+), 66 deletions(-) diff --git a/src/views/layout/components/NavBar/index.vue b/src/views/layout/components/NavBar/index.vue index 5b0592c..312ed43 100644 --- a/src/views/layout/components/NavBar/index.vue +++ b/src/views/layout/components/NavBar/index.vue @@ -1,76 +1,56 @@ <template> - <el-breadcrumb class="app-breadcrumb" separator="/"> - <transition-group name="breadcrumb"> - <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> - <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> - <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> - </el-breadcrumb-item> - </transition-group> - </el-breadcrumb> + <div class="NavBar"> + <div class="NavTitle">椤甸潰瀵艰埅</div> + <div class="NavRefresh"> + <el-button icon="el-icon-refresh" @click="Refresh">鍒锋柊</el-button> + </div> + </div> </template> - <script> -import pathToRegexp from 'path-to-regexp' - export default { - data() { - return { - levelList: null - } - }, - watch: { - $route() { - this.getBreadcrumb() - } - }, - created() { - this.getBreadcrumb() - }, - methods: { - getBreadcrumb() { - // only show routes with meta.title - let matched = this.$route.matched.filter(item => item.meta && item.meta.title) - const first = matched[0] + data(){ + return{ - if (!this.isDashboard(first)) { - matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) - } - - this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) + } }, - isDashboard(route) { - const name = route && route.name - if (!name) { - return false - } - return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() - }, - pathCompile(path) { - const { params } = this.$route - var toPath = pathToRegexp.compile(path) - return toPath(params) - }, - handleLink(item) { - const { redirect, path } = item - if (redirect) { - this.$router.push(redirect) - return - } - this.$router.push(this.pathCompile(path)) + methods:{ + Refresh(){ + window.location.href = ""; + } } - } } </script> - <style lang="scss" scoped> -.app-breadcrumb.el-breadcrumb { - display: inline-block; - font-size: 14px; - line-height: 30px; - margin-left: 8px; - .no-redirect { - color: #97a8be; - cursor: text; - } -} -</style> + .NavBar{ + display: flex; + color: #999999; + justify-content: space-between; + line-height: 60px; + width: 100%; + padding: 0 40px; + background-color: #fff; + .NavTitle{ + display: flex; + align-items: center; + font-weight: 650; + font-size: 18px; + &::before{ + content: ""; + display: inline-block; + width: 5px; + height: 20px; + margin-right: 5px; + background-color: #0079fe; + } + } + .NavRefresh{ + width: 70px; + height: 30px; + .el-button{ + padding: 0; + width: 100%; + height: 100%; + } + } + } +</style> \ No newline at end of file -- Gitblit v1.8.0