github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:28:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复开启切换侧边栏同时跳转页面，但子导航是外链时的bug

Browse Source
This commit is contained in:
hooray
2021-12-08 10:05:55 +08:00
parent f5615812d5
commit fb520e8666
5 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/Search/index.vue
+5 -8
View File
@@ -25,14 +25,14 @@
</div>
<div ref="search" class="result" :class="{'mobile': $store.state.settings.mode === 'mobile'}">
<router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
<a :ref="`search-item-${index}`" :href="isExternal(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternal(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
<a :ref="`search-item-${index}`" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
<div class="icon">
<svg-icon v-if="item.icon" :name="item.icon" />
</div>
<div class="info">
<div class="title">
{{ item.title }}
<svg-icon v-if="item.isExternal" name="external-link" />
<svg-icon v-if="item.isExternalLink" name="external-link" />
</div>
<div class="breadcrumb">
<span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
@@ -50,7 +50,7 @@
</template>
<script setup>
import { deepClone } from '@/util'
import { deepClone, isExternalLink } from '@/util'
const { proxy } = getCurrentInstance()
const store = useStore()
@@ -120,9 +120,6 @@ onMounted(() => {
})
})
function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
function hasChildren(item) {
let flag = true
if (item.children) {
@@ -154,7 +151,7 @@ function getSourceList(arr) {
}
breadcrumb.push(item.meta.title)
let path = ''
if (isExternal(item.path)) {
if (isExternalLink(item.path)) {
path = item.path
} else {
path = item.meta.basePath ? [item.meta.basePath, item.path].join('/') : item.path
@@ -165,7 +162,7 @@ function getSourceList(arr) {
i18n: item.meta.i18n,
breadcrumb: breadcrumb,
path: path,
isExternal: isExternal(item.path)
isExternalLink: isExternalLink(item.path)
})
}
}
src/layout/components/SidebarItem/index.vue
+6 -19
View File
@@ -7,27 +7,27 @@
</template>
<SidebarItem v-for="route in item.children" :key="route.path" :item="route" />
</el-sub-menu>
<router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolvePath(item.path)">
<a :href="isExternal(resolvePath(item.path)) ? resolvePath(item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternal(resolvePath(item.path)) ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta.title" :index="resolvePath(item.path)">
<router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
<a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
<span class="title">{{ item.meta.title }}</span>
</el-menu-item>
</a>
</router-link>
<el-sub-menu v-else :title="item.meta.title" :index="resolvePath(item.path)">
<el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<template #title>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
<span class="title">{{ item.meta.title }}</span>
</template>
<SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolvePath(item.path)" />
<SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
</el-sub-menu>
</div>
</template>
<script setup>
import SidebarItem from './index.vue'
import path from 'path-browserify'
import { isExternalLink, resolveRoutePath } from '@/util'
const props = defineProps({
item: {
@@ -51,19 +51,6 @@ const hasChildren = computed(() => {
}
return flag
})
function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
function resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(props.basePath)) {
return props.basePath
}
return props.basePath ? path.resolve(props.basePath, routePath) : routePath
}
</script>
<style lang="scss" scoped>
src/layout/index.vue
+6 -1
View File
@@ -36,6 +36,7 @@ import SubSidebar from './components/SubSidebar/index.vue'
import Topbar from './components/Topbar/index.vue'
import Search from './components/Search/index.vue'
import ThemeSetting from './components/ThemeSetting/index.vue'
import { isExternalLink } from '@/util'
const { proxy } = getCurrentInstance()
const store = useStore()
@@ -82,7 +83,11 @@ provide('switchMenu', switchMenu)
function switchMenu(index) {
store.commit('menu/switchHeaderActived', index)
if (store.state.settings.switchSidebarAndPageJump) {
router.push(store.getters['menu/sidebarRoutesFirstDeepestPath'])
if (isExternalLink(store.getters['menu/sidebarRoutesFirstDeepestPath'])) {
window.open(store.getters['menu/sidebarRoutesFirstDeepestPath'], '_blank')
} else {
router.push(store.getters['menu/sidebarRoutesFirstDeepestPath'])
}
}
}
</script>
src/store/modules/menu.js
+5 -5
View File
@@ -1,5 +1,5 @@
import path from 'path-browserify'
import { deepClone } from '@/util'
import { deepClone, resolveRoutePath } from '@/util'
import api from '@/api'
function hasPermission(permissions, route) {
@@ -124,15 +124,15 @@ function getDeepestPath(routes, rootPath = '') {
) {
for (let i = 0; i < routes.children.length; i++) {
if (routes.children[i].meta.sidebar != false) {
retnPath = getDeepestPath(routes.children[i], path.resolve(rootPath, routes.path))
retnPath = getDeepestPath(routes.children[i], resolveRoutePath(rootPath, routes.path))
break
}
}
} else {
retnPath = getDeepestPath(routes.children[0], path.resolve(rootPath, routes.path))
retnPath = getDeepestPath(routes.children[0], resolveRoutePath(rootPath, routes.path))
}
} else {
retnPath = path.resolve(rootPath, routes.path)
retnPath = resolveRoutePath(rootPath, routes.path)
}
return retnPath
}
@@ -252,7 +252,7 @@ const mutations = {
let defaultOpenedPaths = []
routes.map(item => {
item.meta.defaultOpened && defaultOpenedPaths.push(item.path)
item.children.map(child => {
item.children && item.children.map(child => {
child.meta.defaultOpened && defaultOpenedPaths.push(path.resolve(item.path, child.path))
})
})
src/util/index.js
+15
View File
@@ -1,3 +1,4 @@
import path from 'path-browserify'
import store from '@/store'
export function deepClone(target) {
@@ -61,3 +62,17 @@ export function authAll(value) {
})
return auth
}
export function isExternalLink(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
export function resolveRoutePath(basePath, routePath) {
if (isExternalLink(routePath)) {
return routePath
}
if (isExternalLink(basePath)) {
return basePath
}
return basePath ? path.resolve(basePath, routePath) : routePath
}