'admin-21.01.17:新增动态路由、处理页面刷新逻辑、字体图标等'

This commit is contained in:
lyt-Top 2021-01-17 21:14:26 +08:00
parent 5a57e37578
commit eece2e60f8
16 changed files with 445 additions and 155 deletions

View File

@ -6,7 +6,7 @@
"build": "vite build" "build": "vite build"
}, },
"dependencies": { "dependencies": {
"element-plus": "^v1.0.1-beta.24", "element-plus": "^1.0.1-beta.27",
"mitt": "^2.1.0", "mitt": "^2.1.0",
"sortablejs": "^1.10.2", "sortablejs": "^1.10.2",
"vue": "^3.0.5", "vue": "^3.0.5",

View File

@ -1,4 +1,5 @@
declare const React: string; declare const React: string;
declare module '*.json'; declare module '*.json';
declare module '*.png'; declare module '*.png';
declare module '*.jpg'; declare module '*.jpg';
declare module '*.scss';

View File

@ -1,27 +1,63 @@
<template> <template>
<router-view /> <router-view v-show="getThemeConfig.lockScreenTime !== 0" />
<LockScreen v-if="getThemeConfig.isLockScreen" /> <LockScreen v-if="getThemeConfig.isLockScreen" />
<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
</template> </template>
<script lang="ts"> <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 { useStore } from "/@/store/index.ts";
import { getLocal } from "/@/utils/storage.ts";
import { setIconfont } from "/@/utils/setIconfont.ts"; import { setIconfont } from "/@/utils/setIconfont.ts";
import LockScreen from "/@/views/layout/lockScreen/index.vue"; import LockScreen from "/@/views/layout/lockScreen/index.vue";
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
export default { export default {
name: "app", name: "app",
components: { LockScreen }, components: { LockScreen, Setings },
setup() { setup() {
const { proxy } = getCurrentInstance();
const setingsRef = ref();
const store = useStore(); const store = useStore();
// //
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
// icon //
const openSetingsDrawer = () => {
setingsRef.value.openDrawer();
};
//
onBeforeMount(() => { 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 { return {
setingsRef,
getThemeConfig, getThemeConfig,
}; };
}, },

View File

@ -1,58 +1,196 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
const staticRoutes: Array<RouteRecordRaw> = [ const dynamicRoutes = [
{ {
path: '/', path: '/',
name: 'home',
component: () => import('/@/views/layout/index.vue'), component: () => import('/@/views/layout/index.vue'),
redirect: '/home', redirect: '/home',
meta: { meta: {
title: '首页' title: '首页',
isLink: '',
isHide: false
}, },
children: [{ children: [{
path: '/home', path: '/home',
name: 'home',
component: () => import('/@/views/home/index.vue'), component: () => import('/@/views/home/index.vue'),
meta: { meta: {
title: '首页' title: '首页',
isLink: '',
isHide: false,
icon: 'iconfont icon-shouye'
} }
}, },
{ {
path: '/docs', path: '/system',
name: 'docs',
component: () => import('/@/views/docs/index.vue'), component: () => import('/@/views/docs/index.vue'),
redirect: '/system/menu',
meta: { 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', path: '/docs1',
name: 'docs1',
component: () => import('/@/views/docs copy 1/index.vue'), component: () => import('/@/views/docs copy 1/index.vue'),
meta: { meta: {
title: '文档1' title: '个人中心',
isLink: '',
isHide: false,
icon: 'iconfont icon-gerenzhongxin'
} }
}, },
{ {
path: '/docs2', path: '/docs2',
name: 'docs2',
component: () => import('/@/views/docs copy 2/index.vue'), component: () => import('/@/views/docs copy 2/index.vue'),
meta: { meta: {
title: '文档2' title: '工具类集合',
isLink: '',
isHide: false,
icon: 'iconfont icon-gongju'
} }
}, },
{ {
path: '/docs3', path: '/docs3',
name: 'docs3',
component: () => import('/@/views/docs copy 3/index.vue'), component: () => import('/@/views/docs copy 3/index.vue'),
meta: { 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', path: '/login',
name: 'login',
component: () => import('/@/views/login/index.vue'), component: () => import('/@/views/login/index.vue'),
meta: { meta: {
title: '登陆' title: '登陆'
@ -60,7 +198,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
}, },
{ {
path: '/404', path: '/404',
name: '404',
component: () => import('/@/views/error/404.vue'), component: () => import('/@/views/error/404.vue'),
meta: { meta: {
title: '找不到此页面' title: '找不到此页面'
@ -68,7 +205,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
}, },
{ {
path: '/401', path: '/401',
name: '401',
component: () => import('/@/views/error/401.vue'), component: () => import('/@/views/error/401.vue'),
meta: { meta: {
title: '没有权限' title: '没有权限'
@ -76,7 +212,10 @@ const staticRoutes: Array<RouteRecordRaw> = [
}, },
{ {
path: '/:pathMatch(.*)', path: '/:pathMatch(.*)',
redirect: '/404' redirect: '/404',
meta: {
title: '页面找不到重定向'
}
} }
] ]
@ -85,6 +224,10 @@ const router = createRouter({
routes: staticRoutes routes: staticRoutes
}) })
dynamicRoutes.map((route) => {
router.addRoute(route as RouteRecordRaw);
});
// router.afterEach((to, from) => { // router.afterEach((to, from) => {
// }) // })

View File

@ -22,7 +22,7 @@ export interface RootStateTypes {
isUniqueOpened: boolean, isUniqueOpened: boolean,
isFixedHeader: boolean, isFixedHeader: boolean,
isFixedHeaderChange: boolean, isFixedHeaderChange: boolean,
isCollapse1: boolean, isClassicSplitMenu: boolean,
isLockScreen: boolean, isLockScreen: boolean,
lockScreenTime: number, lockScreenTime: number,
isShowLogo: boolean, isShowLogo: boolean,

View File

@ -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-8: mix($--color-whites, $--color-danger, 80%) !default;
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default; $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
$--bg-topBar: #ffffff; $--bg-topBar: #ffffff;
$--bg-menuBar: #29384d; $--bg-menuBar: #545c64;
$--bg-columnsMenuBar: #4276ab; $--bg-columnsMenuBar: #4276ab;
$--bg-topBarColor: #606266; $--bg-topBarColor: #606266;
$--bg-menuBarColor: #e6e6e6; $--bg-menuBarColor: #c4c4c4;
$--bg-columnsMenuBarColor: #e6e6e6; $--bg-columnsMenuBarColor: #e6e6e6;
/* 赋值给:root /* 赋值给:root

View File

@ -758,6 +758,17 @@
@extend .el-active-extend; @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 标签页 /* Tabs 标签页
------------------------------- */ ------------------------------- */

View File

@ -1,7 +1,10 @@
// 字体图标 url
const urlArr = ["//at.alicdn.com/t/font_2298093_3atw1lxsgot.css"]
// 动态设置字体图标 // 动态设置字体图标
export function setIconfont(url: Array<string> = []) { export function setIconfont() {
if (url.length <= 0) return false if (urlArr.length <= 0) return false
url.map(v => { urlArr.map(v => {
let link = document.createElement('link') let link = document.createElement('link')
link.rel = 'stylesheet' link.rel = 'stylesheet'
link.href = v link.href = v

View File

@ -7,10 +7,10 @@ export default {
warning: "#e6a23c", warning: "#e6a23c",
danger: "#f56c6c", danger: "#f56c6c",
topBar: "#ffffff", topBar: "#ffffff",
menuBar: "#29384d", menuBar: "#545c64",
columnsMenuBar: '#4276ab', columnsMenuBar: '#4276ab',
topBarColor: "#606266", topBarColor: "#606266",
menuBarColor: "#e6e6e6", menuBarColor: "#c4c4c4",
columnsMenuBarColor: '#e6e6e6', columnsMenuBarColor: '#e6e6e6',
isTopBarColorGradual: false, isTopBarColorGradual: false,
isMenuBarColorGradual: false, isMenuBarColorGradual: false,
@ -19,7 +19,7 @@ export default {
isUniqueOpened: false, isUniqueOpened: false,
isFixedHeader: false, isFixedHeader: false,
isFixedHeaderChange: false, isFixedHeaderChange: false,
isCollapse1: false, isClassicSplitMenu: false,
isLockScreen: false, isLockScreen: false,
lockScreenTime: 30, lockScreenTime: 30,
isShowLogo: false, isShowLogo: false,

View File

@ -18,7 +18,7 @@ const setWatermark = (str: any) => {
div.style.top = "35px" div.style.top = "35px"
div.style.left = "0px" div.style.left = "0px"
div.style.position = "fixed" div.style.position = "fixed"
div.style.zIndex = "100000" div.style.zIndex = "10000000"
div.style.width = document.documentElement.clientWidth + "px" div.style.width = document.documentElement.clientWidth + "px"
div.style.height = document.documentElement.clientHeight + "px" div.style.height = document.documentElement.clientHeight + "px"
div.style.background = `url(${can.toDataURL("image/png")}) left top repeat` div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`

View File

@ -15,7 +15,9 @@ import {
watch, watch,
getCurrentInstance, getCurrentInstance,
ref, ref,
onBeforeMount,
} from "vue"; } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Logo from "/@/views/layout/logo/index.vue"; import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue"; import Vertical from "/@/views/layout/navMenu/vertical.vue";
@ -24,56 +26,31 @@ export default {
components: { Logo, Vertical }, components: { Logo, Vertical },
setup() { setup() {
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore(); const store = useStore();
const state = reactive({ const state = reactive({
menuList: [ 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",
},
},
],
}); });
// //
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(() => { const setCollapseWidth = computed(() => {
let { layout, isCollapse, menuBar } = store.state.themeConfig; let { layout, isCollapse, menuBar } = store.state.themeConfig;
@ -115,6 +92,10 @@ export default {
proxy.$refs.layoutAsideScrollbarRef.update(); proxy.$refs.layoutAsideScrollbarRef.update();
} }
}); });
//
onBeforeMount(() => {
setFilterRoutes();
});
return { return {
setCollapseWidth, setCollapseWidth,
setShowLogo, setShowLogo,

View File

@ -3,46 +3,24 @@
<Classic v-else-if="getThemeConfig.layout === 'classic'" /> <Classic v-else-if="getThemeConfig.layout === 'classic'" />
<Transverse v-else-if="getThemeConfig.layout === 'transverse'" /> <Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
<Columns v-else-if="getThemeConfig.layout === 'columns'" /> <Columns v-else-if="getThemeConfig.layout === 'columns'" />
<Setings ref="setingsRef" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { computed } from "vue";
computed,
ref,
getCurrentInstance,
onBeforeMount,
onUnmounted,
} from "vue";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Defaults from "/@/views/layout/main/defaults.vue"; import Defaults from "/@/views/layout/main/defaults.vue";
import Classic from "/@/views/layout/main/classic.vue"; import Classic from "/@/views/layout/main/classic.vue";
import Transverse from "/@/views/layout/main/transverse.vue"; import Transverse from "/@/views/layout/main/transverse.vue";
import Columns from "/@/views/layout/main/columns.vue"; import Columns from "/@/views/layout/main/columns.vue";
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
export default { export default {
name: "layout", name: "layout",
components: { Defaults, Classic, Transverse, Columns, Setings }, components: { Defaults, Classic, Transverse, Columns },
setup() { setup() {
const { proxy } = getCurrentInstance();
const setingsRef = ref();
const store = useStore(); const store = useStore();
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
const openSetingsDrawer = () => {
setingsRef.value.openDrawer();
};
onBeforeMount(() => {
proxy.mittBus.on("openSetingsDrawer", () => {
openSetingsDrawer();
});
});
onUnmounted(() => {
proxy.mittBus.off("openSetingsDrawer", () => {});
});
return { return {
setingsRef,
getThemeConfig, getThemeConfig,
}; };
}, },

View File

@ -20,9 +20,10 @@
</div> </div>
<div class="layout-lock-screen-login-box-name">Administrator</div> <div class="layout-lock-screen-login-box-name">Administrator</div>
<div class="layout-lock-screen-login-box-value"> <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> <template #append>
<el-button icon="el-icon-right"></el-button> <el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
</template> </template>
</el-input> </el-input>
</div> </div>
@ -42,6 +43,7 @@
import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue"; import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import { formatDate } from "/@/utils/formatTime.ts"; import { formatDate } from "/@/utils/formatTime.ts";
import { setLocal } from "/@/utils/storage.ts";
export default { export default {
name: "layoutLockScreen", name: "layoutLockScreen",
setup() { setup() {
@ -62,6 +64,7 @@ export default {
setIntervalTime: null, setIntervalTime: null,
isShowLockScreen: false, isShowLockScreen: false,
isShowLockScreenIntervalTime: null, isShowLockScreenIntervalTime: null,
lockScreenPassword: "",
}); });
// //
const onDown = (down) => { const onDown = (down) => {
@ -137,6 +140,7 @@ export default {
state.isShowLockScreenIntervalTime = setInterval(() => { state.isShowLockScreenIntervalTime = setInterval(() => {
if (store.state.themeConfig.lockScreenTime <= 0) { if (store.state.themeConfig.lockScreenTime <= 0) {
state.isShowLockScreen = true; state.isShowLockScreen = true;
setLocalThemeConfig();
return false; return false;
} }
store.state.themeConfig.lockScreenTime--; store.state.themeConfig.lockScreenTime--;
@ -145,6 +149,17 @@ export default {
clearInterval(state.isShowLockScreenIntervalTime); 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(() => { onMounted(() => {
initGetElement(); initGetElement();
initSetTime(); initSetTime();
@ -159,6 +174,7 @@ export default {
onDown, onDown,
onMove, onMove,
onEnd, onEnd,
onLockScreenSubmit,
...toRefs(state), ...toRefs(state),
}; };
}, },

View File

@ -79,8 +79,10 @@ export default {
); );
}); });
const isLayoutTransverse = computed(() => { const isLayoutTransverse = computed(() => {
let { layout } = store.state.themeConfig; let { layout, isClassicSplitMenu } = store.state.themeConfig;
return layout === "transverse"; return (
layout === "transverse" || (isClassicSplitMenu && layout === "classic")
);
}); });
return { return {
getThemeConfig, getThemeConfig,

View File

@ -117,7 +117,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div> <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
@ -126,23 +126,26 @@
<el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch> <el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
</div> </div>
</div> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15"
<div class="layout-breadcrumb-seting-bar-flex-label">自动分割菜单</div> :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"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div> <div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt11"> <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-label">自动锁屏(s/)</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999" <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> </el-input-number>
</div> </div>
</div> </div>
@ -158,25 +161,25 @@
<div class="layout-breadcrumb-seting-bar-flex mt15"> <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-label">面包屑 Breadcrumb</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <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-label">开启 Tagsview</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <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-label">开启 Tagsview 图标</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <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-label">开启 Footer</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <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 mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div> <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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="风格1" value="tagsStyleOne"></el-option>
<el-option label="风格2" value="tagsStyleTwo"></el-option> <el-option label="风格2" value="tagsStyleTwo"></el-option>
<el-option label="风格3" value="tagsStyleThree"></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 mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div> <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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="slideRight" value="slideRight"></el-option>
<el-option label="slideLeft" value="slideLeft"></el-option> <el-option label="slideLeft" value="slideLeft"></el-option>
<el-option label="opacitys" value="opacitys"></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 mt15 mb27">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div> <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <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="columnsRound"></el-option>
<el-option label="卡片" value="columnsCard"></el-option> <el-option label="卡片" value="columnsCard"></el-option>
</el-select> </el-select>
@ -326,8 +332,8 @@
<script lang="ts"> <script lang="ts">
import { import {
nextTick, nextTick,
onBeforeMount,
onUnmounted, onUnmounted,
onMounted,
getCurrentInstance, getCurrentInstance,
defineComponent, defineComponent,
computed, computed,
@ -336,6 +342,7 @@ import { useStore } from "/@/store/index.ts";
import { getLightColor } from "/@/utils/theme.ts"; import { getLightColor } from "/@/utils/theme.ts";
import Watermark from "/@/utils/wartermark.ts"; import Watermark from "/@/utils/wartermark.ts";
import { verifyAndSpace } from "/@/utils/toolsValidate.js"; import { verifyAndSpace } from "/@/utils/toolsValidate.js";
import { setLocal, getLocal } from "/@/utils/storage.ts";
export default defineComponent({ export default defineComponent({
name: "layoutBreadcrumbSeting", name: "layoutBreadcrumbSeting",
setup() { setup() {
@ -344,15 +351,12 @@ export default defineComponent({
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
const openDrawer = () => { // 1
getThemeConfig.value.isDrawer = true;
};
const closeDrawer = () => {
getThemeConfig.value.isDrawer = false;
};
const onColorPickerChange = (color: string) => { const onColorPickerChange = (color: string) => {
setPropertyFun(`--color-${color}`, getThemeConfig.value[color]); setPropertyFun(`--color-${color}`, getThemeConfig.value[color]);
setDispatchThemeConfig();
}; };
// 1
const setPropertyFun = (color: string, targetVal: any) => { const setPropertyFun = (color: string, targetVal: any) => {
document.documentElement.style.setProperty(color, targetVal); document.documentElement.style.setProperty(color, targetVal);
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
@ -362,6 +366,7 @@ export default defineComponent({
); );
} }
}; };
// 2 /
const onBgColorPickerChange = (bg: string) => { const onBgColorPickerChange = (bg: string) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
`--bg-${bg}`, `--bg-${bg}`,
@ -369,7 +374,9 @@ export default defineComponent({
); );
onTopBarGradualChange(); onTopBarGradualChange();
onMenuBarGradualChange(); onMenuBarGradualChange();
setDispatchThemeConfig();
}; };
// 2 / -->
const onTopBarGradualChange = () => { const onTopBarGradualChange = () => {
setGraduaFun( setGraduaFun(
".layout-navbars-breadcrumb-index", ".layout-navbars-breadcrumb-index",
@ -377,6 +384,7 @@ export default defineComponent({
getThemeConfig.value.topBar getThemeConfig.value.topBar
); );
}; };
// 2 / -->
const onMenuBarGradualChange = () => { const onMenuBarGradualChange = () => {
setGraduaFun( setGraduaFun(
".layout-container .el-aside", ".layout-container .el-aside",
@ -384,6 +392,7 @@ export default defineComponent({
getThemeConfig.value.menuBar getThemeConfig.value.menuBar
); );
}; };
// 2 / -->
const setGraduaFun = (el: string, bool: boolean, color: string) => { const setGraduaFun = (el: string, bool: boolean, color: string) => {
nextTick(() => { nextTick(() => {
let els = document.querySelector(el); let els = document.querySelector(el);
@ -397,8 +406,16 @@ export default defineComponent({
)})` )})`
); );
else els.setAttribute("style", `background-image:${color}`); 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 = () => { const onMenuBarHighlightChange = () => {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
@ -407,28 +424,44 @@ export default defineComponent({
if (getThemeConfig.value.isMenuBarColorHighlight) if (getThemeConfig.value.isMenuBarColorHighlight)
els.setAttribute("class", `${attr} add-is-active`); els.setAttribute("class", `${attr} add-is-active`);
else els.setAttribute("class", `${attr}`); else els.setAttribute("class", `${attr}`);
setLocalThemeConfig();
setLocal("menuBarHighlightClass", els.getAttribute("class"));
}, 0); }, 0);
}); });
}; };
// 3 -->
const onThemeConfigChange = () => { const onThemeConfigChange = () => {
onMenuBarHighlightChange(); onMenuBarHighlightChange();
setDispatchThemeConfig();
}; };
// 3 --> Header
const onIsFixedHeaderChange = () => { const onIsFixedHeaderChange = () => {
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
.isFixedHeader .isFixedHeader
? false ? false
: true; : true;
setLocalThemeConfig();
}; };
// 3 -->
const onClassicSplitMenuChange = () => {
getThemeConfig.value.isBreadcrumb = false;
setLocalThemeConfig();
};
// 4 --> Logo
const onIsShowLogoChange = () => { const onIsShowLogoChange = () => {
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
? false ? false
: true; : true;
setLocalThemeConfig();
}; };
const onDrawerClose = () => { // 4 --> Breadcrumb
// proxy.$refs.layoutScrollbarRef.update() const onIsBreadcrumbChange = () => {
getThemeConfig.value.isFixedHeaderChange = false; if (getThemeConfig.value.layout === "classic") {
getThemeConfig.value.isShowLogoChange = false; getThemeConfig.value.isClassicSplitMenu = false;
}
setLocalThemeConfig();
}; };
// 4 --> /
const onAddFilterChange = (attr: string) => { const onAddFilterChange = (attr: string) => {
if (attr === "grayscale") { if (attr === "grayscale") {
if (getThemeConfig.value.isGrayscale) if (getThemeConfig.value.isGrayscale)
@ -444,29 +477,38 @@ export default defineComponent({
document document
.getElementById("app") .getElementById("app")
.setAttribute("style", `filter: ${cssAttr}`); .setAttribute("style", `filter: ${cssAttr}`);
setLocalThemeConfig();
setLocal("appFilterStyle", document.querySelector("#app").style.cssText);
}; };
// 4 -->
const onWartermarkChange = () => { const onWartermarkChange = () => {
getThemeConfig.value.isWartermark getThemeConfig.value.isWartermark
? Watermark.set(getThemeConfig.value.wartermarkText) ? Watermark.set(getThemeConfig.value.wartermarkText)
: Watermark.del(); : Watermark.del();
setLocalThemeConfig();
}; };
// 4 -->
const onWartermarkTextInput = (val: string) => { const onWartermarkTextInput = (val: string) => {
getThemeConfig.value.wartermarkText = verifyAndSpace(val); getThemeConfig.value.wartermarkText = verifyAndSpace(val);
if (getThemeConfig.value.wartermarkText === "") return false; if (getThemeConfig.value.wartermarkText === "") return false;
if (getThemeConfig.value.isWartermark) if (getThemeConfig.value.isWartermark)
Watermark.set(getThemeConfig.value.wartermarkText); Watermark.set(getThemeConfig.value.wartermarkText);
setLocalThemeConfig();
}; };
// 5
const onSetLayout = (layout: string) => { const onSetLayout = (layout: string) => {
if (getThemeConfig.value.layout === layout) return false; if (getThemeConfig.value.layout === layout) return false;
getThemeConfig.value.layout = layout; getThemeConfig.value.layout = layout;
getThemeConfig.value.isDrawer = false; getThemeConfig.value.isDrawer = false;
initSetLayoutChange(); initSetLayoutChange();
onMenuBarHighlightChange();
}; };
// //
const initSetLayoutChange = () => { const initSetLayoutChange = () => {
if (getThemeConfig.value.layout === "classic") { if (getThemeConfig.value.layout === "classic") {
getThemeConfig.value.isShowLogo = true; getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false; getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#FFFFFF"; getThemeConfig.value.menuBar = "#FFFFFF";
getThemeConfig.value.menuBarColor = "#606266"; getThemeConfig.value.menuBarColor = "#606266";
getThemeConfig.value.topBar = "#ffffff"; getThemeConfig.value.topBar = "#ffffff";
@ -476,6 +518,7 @@ export default defineComponent({
getThemeConfig.value.isShowLogo = true; getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false; getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isTagsview = false; getThemeConfig.value.isTagsview = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBarColor = "#FFFFFF"; getThemeConfig.value.menuBarColor = "#FFFFFF";
getThemeConfig.value.topBar = "#545c64"; getThemeConfig.value.topBar = "#545c64";
getThemeConfig.value.topBarColor = "#FFFFFF"; getThemeConfig.value.topBarColor = "#FFFFFF";
@ -484,6 +527,7 @@ export default defineComponent({
getThemeConfig.value.isShowLogo = true; getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = true; getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isTagsview = true; getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#FFFFFF"; getThemeConfig.value.menuBar = "#FFFFFF";
getThemeConfig.value.menuBarColor = "#606266"; getThemeConfig.value.menuBarColor = "#606266";
getThemeConfig.value.topBar = "#ffffff"; getThemeConfig.value.topBar = "#ffffff";
@ -493,8 +537,9 @@ export default defineComponent({
getThemeConfig.value.isShowLogo = false; getThemeConfig.value.isShowLogo = false;
getThemeConfig.value.isBreadcrumb = true; getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isTagsview = true; getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#545c64"; getThemeConfig.value.menuBar = "#545c64";
getThemeConfig.value.menuBarColor = "#FFFFFF"; getThemeConfig.value.menuBarColor = "#c4c4c4";
getThemeConfig.value.topBar = "#FFFFFF"; getThemeConfig.value.topBar = "#FFFFFF";
getThemeConfig.value.topBarColor = "#606266"; getThemeConfig.value.topBarColor = "#606266";
initLayoutChangeFun(); initLayoutChangeFun();
@ -507,10 +552,64 @@ export default defineComponent({
onBgColorPickerChange("topBar"); onBgColorPickerChange("topBar");
onBgColorPickerChange("topBarColor"); onBgColorPickerChange("topBarColor");
}; };
onBeforeMount(() => { // proxy.$refs.layoutScrollbarRef.update()
initSetLayoutChange(); const onDrawerClose = () => {
proxy.mittBus.on("onMenuClick", () => { getThemeConfig.value.isFixedHeaderChange = false;
onMenuBarHighlightChange(); 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(() => { onUnmounted(() => {
@ -518,7 +617,6 @@ export default defineComponent({
}); });
return { return {
openDrawer, openDrawer,
closeDrawer,
onColorPickerChange, onColorPickerChange,
onBgColorPickerChange, onBgColorPickerChange,
onTopBarGradualChange, onTopBarGradualChange,
@ -533,6 +631,9 @@ export default defineComponent({
onWartermarkChange, onWartermarkChange,
onWartermarkTextInput, onWartermarkTextInput,
onSetLayout, onSetLayout,
setLocalThemeConfig,
onClassicSplitMenuChange,
onIsBreadcrumbChange,
}; };
}, },
}); });

View File

@ -3,13 +3,13 @@
v-show="getThemeConfig.isTagsview"> v-show="getThemeConfig.isTagsview">
<Scroll ref="scrollRef"> <Scroll ref="scrollRef">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle"> <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)}" <li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li"
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)" :class="{'is-active':isActive(v.path)}" @contextmenu.prevent="onContextmenu(v,$event)"
:ref="el => { if (el) tagsRefs[k] = el }"> @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="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> v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
<span>{{v.name}}</span> <span>{{v.meta.title}}</span>
<template v-if="isActive(v.path)"> <template v-if="isActive(v.path)">
<i class="el-icon-refresh-right ml5"></i> <i class="el-icon-refresh-right ml5"></i>
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i> <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
@ -31,6 +31,7 @@ import {
ref, ref,
nextTick, nextTick,
onBeforeUpdate, onBeforeUpdate,
onBeforeMount,
} from "vue"; } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"; import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
@ -54,13 +55,7 @@ export default {
y: "", y: "",
}, },
tagsRefsIndex: 0, tagsRefsIndex: 0,
arr2: [ tagsViewList: [],
{ 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" },
],
}); });
const setTagsStyle = computed(() => { const setTagsStyle = computed(() => {
let { tagsStyle } = store.state.themeConfig; let { tagsStyle } = store.state.themeConfig;
@ -73,6 +68,25 @@ export default {
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; 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 initSortable = () => {
const el = document.querySelector(".layout-navbars-tagsview-ul"); const el = document.querySelector(".layout-navbars-tagsview-ul");
const sortable = Sortable.create(el, { animation: 300 }); const sortable = Sortable.create(el, { animation: 300 });
@ -96,8 +110,8 @@ export default {
}); });
}; };
const getTagsRefsIndex = (path: string) => { const getTagsRefsIndex = (path: string) => {
if (state.arr2.length > 0) { if (state.tagsViewList.length > 0) {
state.tagsRefsIndex = state.arr2.findIndex( state.tagsRefsIndex = state.tagsViewList.findIndex(
(item) => item.path === path (item) => item.path === path
); );
} }
@ -105,6 +119,9 @@ export default {
onBeforeUpdate(() => { onBeforeUpdate(() => {
tagsRefs.value = []; tagsRefs.value = [];
}); });
onBeforeMount(() => {
setFilterRoutes();
});
onMounted(() => { onMounted(() => {
initSortable(); initSortable();
scrollRef.value.setScrollLeft(tagsRefs); scrollRef.value.setScrollLeft(tagsRefs);
@ -166,6 +183,7 @@ export default {
&-iconfont { &-iconfont {
position: relative; position: relative;
left: -5px; left: -5px;
font-size: 14px;
} }
&-icon { &-icon {
border-radius: 100%; border-radius: 100%;