'admin-21.01.17:新增动态路由、处理页面刷新逻辑、字体图标等'
This commit is contained in:
parent
5a57e37578
commit
eece2e60f8
@ -6,7 +6,7 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^v1.0.1-beta.24",
|
||||
"element-plus": "^1.0.1-beta.27",
|
||||
"mitt": "^2.1.0",
|
||||
"sortablejs": "^1.10.2",
|
||||
"vue": "^3.0.5",
|
||||
|
3
vue-admin-wonderful-next/source.d.ts
vendored
3
vue-admin-wonderful-next/source.d.ts
vendored
@ -1,4 +1,5 @@
|
||||
declare const React: string;
|
||||
declare module '*.json';
|
||||
declare module '*.png';
|
||||
declare module '*.jpg';
|
||||
declare module '*.jpg';
|
||||
declare module '*.scss';
|
@ -1,27 +1,63 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<router-view v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
<LockScreen v-if="getThemeConfig.isLockScreen" />
|
||||
<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { onBeforeMount, computed } from "vue";
|
||||
import {
|
||||
computed,
|
||||
ref,
|
||||
getCurrentInstance,
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { getLocal } from "/@/utils/storage.ts";
|
||||
import { setIconfont } from "/@/utils/setIconfont.ts";
|
||||
import LockScreen from "/@/views/layout/lockScreen/index.vue";
|
||||
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
|
||||
export default {
|
||||
name: "app",
|
||||
components: { LockScreen },
|
||||
components: { LockScreen, Setings },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const setingsRef = ref();
|
||||
const store = useStore();
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig;
|
||||
});
|
||||
// 设置批量第三方 icon 图标
|
||||
// 布局配置弹窗打开
|
||||
const openSetingsDrawer = () => {
|
||||
setingsRef.value.openDrawer();
|
||||
};
|
||||
// 设置初始化,防止刷新时恢复默认
|
||||
onBeforeMount(() => {
|
||||
setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
|
||||
// 设置批量第三方 icon 图标
|
||||
setIconfont();
|
||||
});
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 监听布局配置弹窗点击打开
|
||||
proxy.mittBus.on("openSetingsDrawer", () => {
|
||||
openSetingsDrawer();
|
||||
});
|
||||
// 获取缓存中的布局配置
|
||||
if (getLocal("themeConfig")) {
|
||||
store.dispatch("setThemeConfig", getLocal("themeConfig"));
|
||||
document.documentElement.style.cssText = getLocal("themeConfigStyle");
|
||||
}
|
||||
});
|
||||
});
|
||||
// 页面销毁时,关闭监听布局配置
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("openSetingsDrawer", () => {});
|
||||
});
|
||||
return {
|
||||
setingsRef,
|
||||
getThemeConfig,
|
||||
};
|
||||
},
|
||||
|
@ -1,58 +1,196 @@
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
|
||||
|
||||
const staticRoutes: Array<RouteRecordRaw> = [
|
||||
const dynamicRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('/@/views/layout/index.vue'),
|
||||
redirect: '/home',
|
||||
meta: {
|
||||
title: '首页'
|
||||
title: '首页',
|
||||
isLink: '',
|
||||
isHide: false
|
||||
},
|
||||
children: [{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('/@/views/home/index.vue'),
|
||||
meta: {
|
||||
title: '首页'
|
||||
title: '首页',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-shouye'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs',
|
||||
name: 'docs',
|
||||
path: '/system',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
redirect: '/system/menu',
|
||||
meta: {
|
||||
title: '文档'
|
||||
title: '系统设置',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-xitongshezhi'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/system/menu',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
meta: {
|
||||
title: '菜单管理',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-caidan'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/system/user',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
meta: {
|
||||
title: '用户管理',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-icon-'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/limits',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
redirect: '/limits/frontEnd',
|
||||
meta: {
|
||||
title: '权限管理',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-quanxian'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/limits/frontEnd',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
redirect: '/limits/frontEnd/page',
|
||||
meta: {
|
||||
title: '前端控制',
|
||||
isLink: '',
|
||||
isHide: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/limits/frontEnd/page',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
meta: {
|
||||
title: '页面权限',
|
||||
isLink: '',
|
||||
isHide: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/limits/frontEnd/btn',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
meta: {
|
||||
title: '按钮权限',
|
||||
isLink: '',
|
||||
isHide: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/limits/backEnd',
|
||||
component: () => import('/@/views/docs/index.vue'),
|
||||
meta: {
|
||||
title: '后端控制',
|
||||
isLink: '',
|
||||
isHide: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/fun',
|
||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||
meta: {
|
||||
title: '功能',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-crew_feature'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/pages',
|
||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||
meta: {
|
||||
title: '页面',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-fuzhiyemian'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/components',
|
||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||
meta: {
|
||||
title: '组件',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-zujian'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/chart',
|
||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||
meta: {
|
||||
title: '大数据图表',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-chanyedashujufuwupingtai'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs1',
|
||||
name: 'docs1',
|
||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||
meta: {
|
||||
title: '文档1'
|
||||
title: '个人中心',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-gerenzhongxin'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs2',
|
||||
name: 'docs2',
|
||||
component: () => import('/@/views/docs copy 2/index.vue'),
|
||||
meta: {
|
||||
title: '文档2'
|
||||
title: '工具类集合',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-gongju'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs3',
|
||||
name: 'docs3',
|
||||
component: () => import('/@/views/docs copy 3/index.vue'),
|
||||
meta: {
|
||||
title: '文档3'
|
||||
title: '外链',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-caozuo-wailian'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/iframe',
|
||||
component: () => import('/@/views/docs copy 3/index.vue'),
|
||||
meta: {
|
||||
title: '内嵌 iframe',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
icon: 'iconfont icon-neiqianshujuchucun'
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
const staticRoutes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('/@/views/login/index.vue'),
|
||||
meta: {
|
||||
title: '登陆'
|
||||
@ -60,7 +198,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
component: () => import('/@/views/error/404.vue'),
|
||||
meta: {
|
||||
title: '找不到此页面'
|
||||
@ -68,7 +205,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: '/401',
|
||||
name: '401',
|
||||
component: () => import('/@/views/error/401.vue'),
|
||||
meta: {
|
||||
title: '没有权限'
|
||||
@ -76,7 +212,10 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
redirect: '/404'
|
||||
redirect: '/404',
|
||||
meta: {
|
||||
title: '页面找不到重定向'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -85,6 +224,10 @@ const router = createRouter({
|
||||
routes: staticRoutes
|
||||
})
|
||||
|
||||
dynamicRoutes.map((route) => {
|
||||
router.addRoute(route as RouteRecordRaw);
|
||||
});
|
||||
|
||||
// router.afterEach((to, from) => {
|
||||
|
||||
// })
|
||||
|
@ -22,7 +22,7 @@ export interface RootStateTypes {
|
||||
isUniqueOpened: boolean,
|
||||
isFixedHeader: boolean,
|
||||
isFixedHeaderChange: boolean,
|
||||
isCollapse1: boolean,
|
||||
isClassicSplitMenu: boolean,
|
||||
isLockScreen: boolean,
|
||||
lockScreenTime: number,
|
||||
isShowLogo: boolean,
|
||||
|
@ -59,10 +59,10 @@ $--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
|
||||
$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
|
||||
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
|
||||
$--bg-topBar: #ffffff;
|
||||
$--bg-menuBar: #29384d;
|
||||
$--bg-menuBar: #545c64;
|
||||
$--bg-columnsMenuBar: #4276ab;
|
||||
$--bg-topBarColor: #606266;
|
||||
$--bg-menuBarColor: #e6e6e6;
|
||||
$--bg-menuBarColor: #c4c4c4;
|
||||
$--bg-columnsMenuBarColor: #e6e6e6;
|
||||
|
||||
/* 赋值给:root
|
||||
|
@ -758,6 +758,17 @@
|
||||
@extend .el-active-extend;
|
||||
}
|
||||
}
|
||||
// 菜单收起时且是a链接
|
||||
.el-popper.is-dark a {
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 第三方图标字体间距/大小设置
|
||||
.el-menu-item .iconfont,
|
||||
.el-submenu .iconfont {
|
||||
font-size: 14px !important;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
------------------------------- */
|
||||
|
@ -1,7 +1,10 @@
|
||||
// 字体图标 url
|
||||
const urlArr = ["//at.alicdn.com/t/font_2298093_3atw1lxsgot.css"]
|
||||
|
||||
// 动态设置字体图标
|
||||
export function setIconfont(url: Array<string> = []) {
|
||||
if (url.length <= 0) return false
|
||||
url.map(v => {
|
||||
export function setIconfont() {
|
||||
if (urlArr.length <= 0) return false
|
||||
urlArr.map(v => {
|
||||
let link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = v
|
||||
|
@ -7,10 +7,10 @@ export default {
|
||||
warning: "#e6a23c",
|
||||
danger: "#f56c6c",
|
||||
topBar: "#ffffff",
|
||||
menuBar: "#29384d",
|
||||
menuBar: "#545c64",
|
||||
columnsMenuBar: '#4276ab',
|
||||
topBarColor: "#606266",
|
||||
menuBarColor: "#e6e6e6",
|
||||
menuBarColor: "#c4c4c4",
|
||||
columnsMenuBarColor: '#e6e6e6',
|
||||
isTopBarColorGradual: false,
|
||||
isMenuBarColorGradual: false,
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
isUniqueOpened: false,
|
||||
isFixedHeader: false,
|
||||
isFixedHeaderChange: false,
|
||||
isCollapse1: false,
|
||||
isClassicSplitMenu: false,
|
||||
isLockScreen: false,
|
||||
lockScreenTime: 30,
|
||||
isShowLogo: false,
|
||||
|
@ -18,7 +18,7 @@ const setWatermark = (str: any) => {
|
||||
div.style.top = "35px"
|
||||
div.style.left = "0px"
|
||||
div.style.position = "fixed"
|
||||
div.style.zIndex = "100000"
|
||||
div.style.zIndex = "10000000"
|
||||
div.style.width = document.documentElement.clientWidth + "px"
|
||||
div.style.height = document.documentElement.clientHeight + "px"
|
||||
div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`
|
||||
|
@ -15,7 +15,9 @@ import {
|
||||
watch,
|
||||
getCurrentInstance,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import Logo from "/@/views/layout/logo/index.vue";
|
||||
import Vertical from "/@/views/layout/navMenu/vertical.vue";
|
||||
@ -24,56 +26,31 @@ export default {
|
||||
components: { Logo, Vertical },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
menuList: [
|
||||
{
|
||||
path: "/home",
|
||||
meta: {
|
||||
title: "首页",
|
||||
icon: "el-icon-s-home",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/home",
|
||||
meta: {
|
||||
title: "微软",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs",
|
||||
meta: {
|
||||
title: "文档",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs1",
|
||||
meta: {
|
||||
title: "文档1",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/docs2",
|
||||
meta: {
|
||||
title: "文档2",
|
||||
icon: "el-icon-s-management",
|
||||
isLink: "https://www.ele.me",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs3",
|
||||
meta: {
|
||||
title: "文档3",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
],
|
||||
menuList: [],
|
||||
});
|
||||
// 设置/过滤路由(非静态路由/是否显示在菜单中)
|
||||
const setFilterRoutes = () => {
|
||||
const routesList = router.getRoutes();
|
||||
routesList.map((route) => {
|
||||
if (route.path === "/") {
|
||||
state.menuList = filterRoutesFun(route.children);
|
||||
console.log(filterRoutesFun(route.children));
|
||||
}
|
||||
});
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<object>) => {
|
||||
return arr
|
||||
.filter((item) => !item.meta.isHide)
|
||||
.map((item) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
// 设置菜单展开/收起时的宽度
|
||||
const setCollapseWidth = computed(() => {
|
||||
let { layout, isCollapse, menuBar } = store.state.themeConfig;
|
||||
@ -115,6 +92,10 @@ export default {
|
||||
proxy.$refs.layoutAsideScrollbarRef.update();
|
||||
}
|
||||
});
|
||||
// 初始化
|
||||
onBeforeMount(() => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
return {
|
||||
setCollapseWidth,
|
||||
setShowLogo,
|
||||
|
@ -3,46 +3,24 @@
|
||||
<Classic v-else-if="getThemeConfig.layout === 'classic'" />
|
||||
<Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
|
||||
<Columns v-else-if="getThemeConfig.layout === 'columns'" />
|
||||
<Setings ref="setingsRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
ref,
|
||||
getCurrentInstance,
|
||||
onBeforeMount,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import Defaults from "/@/views/layout/main/defaults.vue";
|
||||
import Classic from "/@/views/layout/main/classic.vue";
|
||||
import Transverse from "/@/views/layout/main/transverse.vue";
|
||||
import Columns from "/@/views/layout/main/columns.vue";
|
||||
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
|
||||
export default {
|
||||
name: "layout",
|
||||
components: { Defaults, Classic, Transverse, Columns, Setings },
|
||||
components: { Defaults, Classic, Transverse, Columns },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const setingsRef = ref();
|
||||
const store = useStore();
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig;
|
||||
});
|
||||
const openSetingsDrawer = () => {
|
||||
setingsRef.value.openDrawer();
|
||||
};
|
||||
onBeforeMount(() => {
|
||||
proxy.mittBus.on("openSetingsDrawer", () => {
|
||||
openSetingsDrawer();
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("openSetingsDrawer", () => {});
|
||||
});
|
||||
return {
|
||||
setingsRef,
|
||||
getThemeConfig,
|
||||
};
|
||||
},
|
||||
|
@ -20,9 +20,10 @@
|
||||
</div>
|
||||
<div class="layout-lock-screen-login-box-name">Administrator</div>
|
||||
<div class="layout-lock-screen-login-box-value">
|
||||
<el-input placeholder="请输入密码" ref="layoutLockScreenInputRef">
|
||||
<el-input placeholder="请输入密码" ref="layoutLockScreenInputRef" v-model="lockScreenPassword"
|
||||
@keyup.enter.native.stop="onLockScreenSubmit()">
|
||||
<template #append>
|
||||
<el-button icon="el-icon-right"></el-button>
|
||||
<el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -42,6 +43,7 @@
|
||||
import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { formatDate } from "/@/utils/formatTime.ts";
|
||||
import { setLocal } from "/@/utils/storage.ts";
|
||||
export default {
|
||||
name: "layoutLockScreen",
|
||||
setup() {
|
||||
@ -62,6 +64,7 @@ export default {
|
||||
setIntervalTime: null,
|
||||
isShowLockScreen: false,
|
||||
isShowLockScreenIntervalTime: null,
|
||||
lockScreenPassword: "",
|
||||
});
|
||||
// 鼠标按下
|
||||
const onDown = (down) => {
|
||||
@ -137,6 +140,7 @@ export default {
|
||||
state.isShowLockScreenIntervalTime = setInterval(() => {
|
||||
if (store.state.themeConfig.lockScreenTime <= 0) {
|
||||
state.isShowLockScreen = true;
|
||||
setLocalThemeConfig();
|
||||
return false;
|
||||
}
|
||||
store.state.themeConfig.lockScreenTime--;
|
||||
@ -145,6 +149,17 @@ export default {
|
||||
clearInterval(state.isShowLockScreenIntervalTime);
|
||||
}
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
store.state.themeConfig.isDrawer = false;
|
||||
setLocal("themeConfig", store.state.themeConfig);
|
||||
};
|
||||
// 密码输入点击事件
|
||||
const onLockScreenSubmit = () => {
|
||||
store.state.themeConfig.isLockScreen = false;
|
||||
store.state.themeConfig.lockScreenTime = 30;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
onMounted(() => {
|
||||
initGetElement();
|
||||
initSetTime();
|
||||
@ -159,6 +174,7 @@ export default {
|
||||
onDown,
|
||||
onMove,
|
||||
onEnd,
|
||||
onLockScreenSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
@ -79,8 +79,10 @@ export default {
|
||||
);
|
||||
});
|
||||
const isLayoutTransverse = computed(() => {
|
||||
let { layout } = store.state.themeConfig;
|
||||
return layout === "transverse";
|
||||
let { layout, isClassicSplitMenu } = store.state.themeConfig;
|
||||
return (
|
||||
layout === "transverse" || (isClassicSplitMenu && layout === "classic")
|
||||
);
|
||||
});
|
||||
return {
|
||||
getThemeConfig,
|
||||
|
@ -117,7 +117,7 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isUniqueOpened"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
@ -126,23 +126,26 @@
|
||||
<el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">自动分割菜单</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15"
|
||||
:style="{opacity:getThemeConfig.layout !== 'classic' ? 0.5 : 1}">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'"
|
||||
@change="onClassicSplitMenuChange">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isLockScreen"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isLockScreen" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt11">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
|
||||
size="mini" style="width:90px;">
|
||||
@change="setLocalThemeConfig" size="mini" style="width:90px;">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
@ -158,25 +161,25 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isBreadcrumb"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isBreadcrumb" @change="onIsBreadcrumbChange"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isTagsview"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview 图标</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isTagsviewIcon"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isFooter"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
@ -210,7 +213,8 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
|
||||
<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;"
|
||||
@change="setLocalThemeConfig">
|
||||
<el-option label="风格1" value="tagsStyleOne"></el-option>
|
||||
<el-option label="风格2" value="tagsStyleTwo"></el-option>
|
||||
<el-option label="风格3" value="tagsStyleThree"></el-option>
|
||||
@ -221,7 +225,8 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
|
||||
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;"
|
||||
@change="setLocalThemeConfig">
|
||||
<el-option label="slideRight" value="slideRight"></el-option>
|
||||
<el-option label="slideLeft" value="slideLeft"></el-option>
|
||||
<el-option label="opacitys" value="opacitys"></el-option>
|
||||
@ -231,7 +236,8 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;">
|
||||
<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;"
|
||||
@change="setLocalThemeConfig">
|
||||
<el-option label="圆角" value="columnsRound"></el-option>
|
||||
<el-option label="卡片" value="columnsCard"></el-option>
|
||||
</el-select>
|
||||
@ -326,8 +332,8 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
onUnmounted,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
defineComponent,
|
||||
computed,
|
||||
@ -336,6 +342,7 @@ import { useStore } from "/@/store/index.ts";
|
||||
import { getLightColor } from "/@/utils/theme.ts";
|
||||
import Watermark from "/@/utils/wartermark.ts";
|
||||
import { verifyAndSpace } from "/@/utils/toolsValidate.js";
|
||||
import { setLocal, getLocal } from "/@/utils/storage.ts";
|
||||
export default defineComponent({
|
||||
name: "layoutBreadcrumbSeting",
|
||||
setup() {
|
||||
@ -344,15 +351,12 @@ export default defineComponent({
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig;
|
||||
});
|
||||
const openDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = true;
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
};
|
||||
// 1、全局主题
|
||||
const onColorPickerChange = (color: string) => {
|
||||
setPropertyFun(`--color-${color}`, getThemeConfig.value[color]);
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 1、全局主题设置函数
|
||||
const setPropertyFun = (color: string, targetVal: any) => {
|
||||
document.documentElement.style.setProperty(color, targetVal);
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
@ -362,6 +366,7 @@ export default defineComponent({
|
||||
);
|
||||
}
|
||||
};
|
||||
// 2、菜单 / 顶栏
|
||||
const onBgColorPickerChange = (bg: string) => {
|
||||
document.documentElement.style.setProperty(
|
||||
`--bg-${bg}`,
|
||||
@ -369,7 +374,9 @@ export default defineComponent({
|
||||
);
|
||||
onTopBarGradualChange();
|
||||
onMenuBarGradualChange();
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||
const onTopBarGradualChange = () => {
|
||||
setGraduaFun(
|
||||
".layout-navbars-breadcrumb-index",
|
||||
@ -377,6 +384,7 @@ export default defineComponent({
|
||||
getThemeConfig.value.topBar
|
||||
);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||
const onMenuBarGradualChange = () => {
|
||||
setGraduaFun(
|
||||
".layout-container .el-aside",
|
||||
@ -384,6 +392,7 @@ export default defineComponent({
|
||||
getThemeConfig.value.menuBar
|
||||
);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 背景渐变函数
|
||||
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
||||
nextTick(() => {
|
||||
let els = document.querySelector(el);
|
||||
@ -397,8 +406,16 @@ export default defineComponent({
|
||||
)})`
|
||||
);
|
||||
else els.setAttribute("style", `background-image:${color}`);
|
||||
setLocalThemeConfig();
|
||||
const elNavbars = document.querySelector(
|
||||
".layout-navbars-breadcrumb-index"
|
||||
);
|
||||
const elAside = document.querySelector(".layout-container .el-aside");
|
||||
if (elNavbars) setLocal("navbarsBgStyle", elNavbars.style.cssText);
|
||||
if (elAside) setLocal("asideBgStyle", elAside.style.cssText);
|
||||
});
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 菜单字体背景高亮
|
||||
const onMenuBarHighlightChange = () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
@ -407,28 +424,44 @@ export default defineComponent({
|
||||
if (getThemeConfig.value.isMenuBarColorHighlight)
|
||||
els.setAttribute("class", `${attr} add-is-active`);
|
||||
else els.setAttribute("class", `${attr}`);
|
||||
setLocalThemeConfig();
|
||||
setLocal("menuBarHighlightClass", els.getAttribute("class"));
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
// 3、界面设置 --> 菜单水平折叠
|
||||
const onThemeConfigChange = () => {
|
||||
onMenuBarHighlightChange();
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 固定 Header
|
||||
const onIsFixedHeaderChange = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
|
||||
.isFixedHeader
|
||||
? false
|
||||
: true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 经典布局分割菜单
|
||||
const onClassicSplitMenuChange = () => {
|
||||
getThemeConfig.value.isBreadcrumb = false;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 侧边栏 Logo
|
||||
const onIsShowLogoChange = () => {
|
||||
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
|
||||
? false
|
||||
: true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
const onDrawerClose = () => {
|
||||
// 关闭弹窗时,初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
|
||||
getThemeConfig.value.isFixedHeaderChange = false;
|
||||
getThemeConfig.value.isShowLogoChange = false;
|
||||
// 4、界面显示 --> 面包屑 Breadcrumb
|
||||
const onIsBreadcrumbChange = () => {
|
||||
if (getThemeConfig.value.layout === "classic") {
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
}
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 灰色模式/色弱模式
|
||||
const onAddFilterChange = (attr: string) => {
|
||||
if (attr === "grayscale") {
|
||||
if (getThemeConfig.value.isGrayscale)
|
||||
@ -444,29 +477,38 @@ export default defineComponent({
|
||||
document
|
||||
.getElementById("app")
|
||||
.setAttribute("style", `filter: ${cssAttr}`);
|
||||
setLocalThemeConfig();
|
||||
setLocal("appFilterStyle", document.querySelector("#app").style.cssText);
|
||||
};
|
||||
// 4、界面显示 --> 开启水印
|
||||
const onWartermarkChange = () => {
|
||||
getThemeConfig.value.isWartermark
|
||||
? Watermark.set(getThemeConfig.value.wartermarkText)
|
||||
: Watermark.del();
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 水印文案
|
||||
const onWartermarkTextInput = (val: string) => {
|
||||
getThemeConfig.value.wartermarkText = verifyAndSpace(val);
|
||||
if (getThemeConfig.value.wartermarkText === "") return false;
|
||||
if (getThemeConfig.value.isWartermark)
|
||||
Watermark.set(getThemeConfig.value.wartermarkText);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 5、布局切换
|
||||
const onSetLayout = (layout: string) => {
|
||||
if (getThemeConfig.value.layout === layout) return false;
|
||||
getThemeConfig.value.layout = layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initSetLayoutChange();
|
||||
onMenuBarHighlightChange();
|
||||
};
|
||||
// 设置布局切换,重置主题样式
|
||||
const initSetLayoutChange = () => {
|
||||
if (getThemeConfig.value.layout === "classic") {
|
||||
getThemeConfig.value.isShowLogo = true;
|
||||
getThemeConfig.value.isBreadcrumb = false;
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
getThemeConfig.value.menuBar = "#FFFFFF";
|
||||
getThemeConfig.value.menuBarColor = "#606266";
|
||||
getThemeConfig.value.topBar = "#ffffff";
|
||||
@ -476,6 +518,7 @@ export default defineComponent({
|
||||
getThemeConfig.value.isShowLogo = true;
|
||||
getThemeConfig.value.isBreadcrumb = false;
|
||||
getThemeConfig.value.isTagsview = false;
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
getThemeConfig.value.menuBarColor = "#FFFFFF";
|
||||
getThemeConfig.value.topBar = "#545c64";
|
||||
getThemeConfig.value.topBarColor = "#FFFFFF";
|
||||
@ -484,6 +527,7 @@ export default defineComponent({
|
||||
getThemeConfig.value.isShowLogo = true;
|
||||
getThemeConfig.value.isBreadcrumb = true;
|
||||
getThemeConfig.value.isTagsview = true;
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
getThemeConfig.value.menuBar = "#FFFFFF";
|
||||
getThemeConfig.value.menuBarColor = "#606266";
|
||||
getThemeConfig.value.topBar = "#ffffff";
|
||||
@ -493,8 +537,9 @@ export default defineComponent({
|
||||
getThemeConfig.value.isShowLogo = false;
|
||||
getThemeConfig.value.isBreadcrumb = true;
|
||||
getThemeConfig.value.isTagsview = true;
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
getThemeConfig.value.menuBar = "#545c64";
|
||||
getThemeConfig.value.menuBarColor = "#FFFFFF";
|
||||
getThemeConfig.value.menuBarColor = "#c4c4c4";
|
||||
getThemeConfig.value.topBar = "#FFFFFF";
|
||||
getThemeConfig.value.topBarColor = "#606266";
|
||||
initLayoutChangeFun();
|
||||
@ -507,10 +552,64 @@ export default defineComponent({
|
||||
onBgColorPickerChange("topBar");
|
||||
onBgColorPickerChange("topBarColor");
|
||||
};
|
||||
onBeforeMount(() => {
|
||||
initSetLayoutChange();
|
||||
proxy.mittBus.on("onMenuClick", () => {
|
||||
onMenuBarHighlightChange();
|
||||
// 关闭弹窗时,初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
|
||||
const onDrawerClose = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = false;
|
||||
getThemeConfig.value.isShowLogoChange = false;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 布局配置弹窗打开
|
||||
const openDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = true;
|
||||
};
|
||||
// 触发 store 布局配置更新
|
||||
const setDispatchThemeConfig = () => {
|
||||
setLocalThemeConfig();
|
||||
setLocalThemeConfigStyle();
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
setLocal("themeConfig", getThemeConfig.value);
|
||||
};
|
||||
// 存储布局配置全局主题样式(html根标签)
|
||||
const setLocalThemeConfigStyle = () => {
|
||||
setLocal("themeConfigStyle", document.documentElement.style.cssText);
|
||||
};
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
proxy.mittBus.on("onMenuClick", () => {
|
||||
onMenuBarHighlightChange();
|
||||
});
|
||||
// 刷新页面时,设置了值,直接取缓存中的值进行初始化
|
||||
setTimeout(() => {
|
||||
// 顶栏背景渐变
|
||||
if (getLocal("navbarsBgStyle")) {
|
||||
document.querySelector(
|
||||
".layout-navbars-breadcrumb-index"
|
||||
).style.cssText = getLocal("navbarsBgStyle");
|
||||
}
|
||||
// 菜单背景渐变
|
||||
if (getLocal("asideBgStyle")) {
|
||||
document.querySelector(
|
||||
".layout-container .el-aside"
|
||||
).style.cssText = getLocal("asideBgStyle");
|
||||
}
|
||||
// 菜单字体背景高亮
|
||||
if (getLocal("menuBarHighlightClass")) {
|
||||
let els = document.querySelector(".el-menu-item.is-active");
|
||||
if (!els) return false;
|
||||
els.setAttribute("class", getLocal("menuBarHighlightClass"));
|
||||
}
|
||||
// 灰色模式/色弱模式
|
||||
if (getLocal("appFilterStyle")) {
|
||||
document.querySelector("#app").style.cssText = getLocal(
|
||||
"appFilterStyle"
|
||||
);
|
||||
}
|
||||
// 开启水印
|
||||
onWartermarkChange();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
@ -518,7 +617,6 @@ export default defineComponent({
|
||||
});
|
||||
return {
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
onColorPickerChange,
|
||||
onBgColorPickerChange,
|
||||
onTopBarGradualChange,
|
||||
@ -533,6 +631,9 @@ export default defineComponent({
|
||||
onWartermarkChange,
|
||||
onWartermarkTextInput,
|
||||
onSetLayout,
|
||||
setLocalThemeConfig,
|
||||
onClassicSplitMenuChange,
|
||||
onIsBreadcrumbChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -3,13 +3,13 @@
|
||||
v-show="getThemeConfig.isTagsview">
|
||||
<Scroll ref="scrollRef">
|
||||
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
|
||||
<li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
|
||||
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
|
||||
:ref="el => { if (el) tagsRefs[k] = el }">
|
||||
<li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li"
|
||||
:class="{'is-active':isActive(v.path)}" @contextmenu.prevent="onContextmenu(v,$event)"
|
||||
@click="onTagsClick(v,k)" :ref="el => { if (el) tagsRefs[k] = el }">
|
||||
<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v.path)"></i>
|
||||
<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.icon"
|
||||
<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon"
|
||||
v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
|
||||
<span>{{v.name}}</span>
|
||||
<span>{{v.meta.title}}</span>
|
||||
<template v-if="isActive(v.path)">
|
||||
<i class="el-icon-refresh-right ml5"></i>
|
||||
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
|
||||
@ -31,6 +31,7 @@ import {
|
||||
ref,
|
||||
nextTick,
|
||||
onBeforeUpdate,
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
@ -54,13 +55,7 @@ export default {
|
||||
y: "",
|
||||
},
|
||||
tagsRefsIndex: 0,
|
||||
arr2: [
|
||||
{ id: 11, name: "微软", path: "/home", icon: "el-icon-star-off" },
|
||||
{ id: 12, name: "文档", path: "/docs", icon: "el-icon-camera" },
|
||||
{ id: 13, name: "文档1", path: "/docs1", icon: "el-icon-truck" },
|
||||
{ id: 15, name: "文档2", path: "/docs2", icon: "el-icon-tableware" },
|
||||
{ id: 1, name: "文档3", path: "/docs3", icon: "el-icon-basketball" },
|
||||
],
|
||||
tagsViewList: [],
|
||||
});
|
||||
const setTagsStyle = computed(() => {
|
||||
let { tagsStyle } = store.state.themeConfig;
|
||||
@ -73,6 +68,25 @@ export default {
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig;
|
||||
});
|
||||
// 设置/过滤路由(非静态路由/是否显示在菜单中)
|
||||
const setFilterRoutes = () => {
|
||||
const routesList = router.getRoutes();
|
||||
routesList.map((route) => {
|
||||
if (route.path === "/") {
|
||||
state.tagsViewList = filterRoutesFun(route.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<object>) => {
|
||||
return arr
|
||||
.filter((item) => !item.meta.isHide)
|
||||
.map((item) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
const initSortable = () => {
|
||||
const el = document.querySelector(".layout-navbars-tagsview-ul");
|
||||
const sortable = Sortable.create(el, { animation: 300 });
|
||||
@ -96,8 +110,8 @@ export default {
|
||||
});
|
||||
};
|
||||
const getTagsRefsIndex = (path: string) => {
|
||||
if (state.arr2.length > 0) {
|
||||
state.tagsRefsIndex = state.arr2.findIndex(
|
||||
if (state.tagsViewList.length > 0) {
|
||||
state.tagsRefsIndex = state.tagsViewList.findIndex(
|
||||
(item) => item.path === path
|
||||
);
|
||||
}
|
||||
@ -105,6 +119,9 @@ export default {
|
||||
onBeforeUpdate(() => {
|
||||
tagsRefs.value = [];
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
onMounted(() => {
|
||||
initSortable();
|
||||
scrollRef.value.setScrollLeft(tagsRefs);
|
||||
@ -166,6 +183,7 @@ export default {
|
||||
&-iconfont {
|
||||
position: relative;
|
||||
left: -5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-icon {
|
||||
border-radius: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user