Skip to content

Commit 53e58b8

Browse files
jzfaijzfai
committed
func of element-svg icon for side menu
1 parent 0dff4c1 commit 53e58b8

File tree

20 files changed

+140
-115
lines changed

20 files changed

+140
-115
lines changed

‎src/hooks/errorLogHook.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import setting from '@/settings'
44
import bus from '@/utils/bus'
55
export default function (app) {
66
//type judge
7-
// base type using type of
8-
// Reference type using instance of
7+
// base type using 'type of'
8+
// Reference type using 'instance of'
99
// recommend to reading https://www.jianshu.com/p/ddc7f189d130
1010
const checkNeed = () => {
1111
const env = import.meta.env.VITE_APP_ENV
@@ -22,7 +22,11 @@ export default function (app) {
2222
app.config.errorHandler = (err) => {
2323
request({
2424
url: '/ty-user/errorCollection/insert',
25-
data: { pageUrl: window.location.href, errorLog: `${err.message}---${err.stack}` },
25+
data: {
26+
pageUrl: window.location.href,
27+
errorLog: `${err.message}---${err.stack.substr(0, 300)}`,
28+
browserType: navigator.userAgent
29+
},
2630
method: 'post',
2731
bfLoading: false,
2832
isAlertErrorMsg: true

‎src/icons/SvgIcon.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default defineComponent({
3535
})
3636
</script>
3737

38-
<style scope>
38+
<style scope lang="scss">
3939
.sub-el-icon,
4040
.nav-icon {
4141
display: inline-block;
@@ -48,8 +48,7 @@ export default defineComponent({
4848
width: 1em;
4949
height: 1em;
5050
position: relative;
51-
top: -0.07em;
5251
fill: currentColor;
53-
vertical-align: middle;
52+
vertical-align: -2px;
5453
}
5554
</style>

‎src/layout/components/Navbar.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,19 @@
1818
src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
1919
class="user-avatar"
2020
/>
21-
<i class="el-icon-caret-bottom" />
21+
<CaretBottom style="width: 1em; height: 1em; margin-left: 4px" />
22+
<!--el-icon-x is destructed-->
23+
<!--<i class="el-icon-caret-bottom" />-->
2224
</div>
2325
<template #dropdown>
2426
<el-dropdown-menu>
2527
<router-link to="/">
2628
<el-dropdown-item>Home</el-dropdown-item>
2729
</router-link>
28-
<a target="_blank" href="https://github.com/jzfai/vue3-admin-electron">
30+
<a target="_blank" href="https://github.com/jzfai/vue3-admin-template">
2931
<el-dropdown-item>Github</el-dropdown-item>
3032
</a>
31-
<a target="_blank" href="https://github.com/jzfai/vue3-admin-electron">
33+
<a target="_blank" href="https://github.com/jzfai/vue3-admin-template">
3234
<el-dropdown-item>Docs</el-dropdown-item>
3335
</a>
3436
<!--<el-dropdown-item>修改密码</el-dropdown-item>-->
@@ -41,6 +43,7 @@
4143
</template>
4244

4345
<script setup>
46+
import { CaretBottom } from '@element-plus/icons'
4447
import Breadcrumb from './Breadcrumb'
4548
import Hamburger from './Hamburger'
4649
import { computed, getCurrentInstance } from 'vue'
@@ -64,6 +67,8 @@ const loginOut = () => {
6467
store.dispatch('user/logout').then(() => {
6568
ElMessage({ message: '退出登录成功', type: 'success' })
6669
proxy.$router.push(`/login?redirect=${proxy.$route.fullPath}`)
70+
//此处reload清空路由和重置部分状态
71+
location.reload()
6772
})
6873
}
6974
</script>

‎src/layout/components/Settings/RightPanel/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
<div class="rightPanel-background" />
44
<div class="rightPanel">
55
<div class="handle-button" :style="{ top: buttonTop + 'px', 'background-color': theme }" @click="show = !show">
6-
<i :class="show ? 'el-icon-close' : 'el-icon-setting'" />
7-
11
6+
<!-- <i :class="show ? 'el-icon-close' : 'el-icon-setting'" />-->
87
</div>
98
<div class="rightPanel-items">
109
<slot />

‎src/layout/components/Sidebar/ElSvgItem.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<el-icon class="el-svg-icon">
3+
<component :is="ElSvg[elSvgName]" />
4+
</el-icon>
5+
</template>
6+
7+
<script setup>
8+
import * as ElSvg from '@element-plus/icons'
9+
const props = defineProps({
10+
elSvgName: {
11+
require: true,
12+
default: 'Fold',
13+
type: String
14+
}
15+
})
16+
let { elSvgName } = props
17+
</script>
18+
19+
<style scoped lang="scss">
20+
.el-svg-icon {
21+
//electron
22+
margin-top: -9px;
23+
margin-right: 8px;
24+
width: 1em;
25+
height: 1em;
26+
margin-left: -2px; //el-svg-icon has some margin
27+
font-size: 20px !important;
28+
text-align: left !important;
29+
}
30+
</style>

‎src/layout/components/Sidebar/Item.jsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
/*使用vue3.0 jsx语法书写*/
22
import { defineComponent } from 'vue'
3-
3+
import ElSvgItem from './ElSvgItem'
44
export default defineComponent({
55
props: {
66
icon: {
77
type: String,
88
default: ''
99
},
10+
meta: {
11+
type: Object,
12+
default: null
13+
},
1014
title: {
1115
type: String,
1216
default: ''
@@ -18,18 +22,15 @@ export default defineComponent({
1822
},
1923
setup(props) {
2024
/*此处写法像极了react*/
21-
// let {proxy} = getCurrentInstance();
22-
const { icon } = props
2325
const renderItem = () => {
24-
if (icon) {
25-
// element-plus remove el-icon
26+
if (props.meta?.elSvgIcon) {
27+
//using element-plus svg icon
28+
// element-plus remove el-icon,using 'svg icon' to replace
2629
// view https://element-plus.org/zh-CN/component/icon.html
27-
// if (icon.includes('el-icon')) {
28-
// return <i className={[icon, 'sub-el-icon']} />
29-
// } else {
30-
// return <svg-icon icon-class={icon} className="nav-icon" />
31-
// }
32-
return <svg-icon icon-class={icon} className="nav-icon" />
30+
return <ElSvgItem elSvgName={props.meta.elSvgIcon} />
31+
} else if (props.meta?.icon) {
32+
console.log('我进入渲染了')
33+
return <svg-icon icon-class={props.meta?.icon} className="nav-icon" />
3334
}
3435
}
3536
return () => {

‎src/layout/components/Sidebar/SidebarItem.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<template v-if="showSidebarItem(item.children, item)">
44
<Link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
55
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
6-
<item :icon="onlyOneChild.meta?.icon || item.meta?.icon" />
6+
<item :meta="onlyOneChild.meta || item.meta" />
77
<template #title>{{ onlyOneChild.meta?.title }}</template>
88
</el-menu-item>
99
</Link>
1010
</template>
1111
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
1212
<template #title>
13-
<item v-if="item.meta" :icon="item.meta && item.meta.icon" />
13+
<item v-if="item.meta" :meta="item.meta" />
1414
<span>{{ item.meta.title }}</span>
1515
</template>
1616
<SidebarItem
@@ -28,7 +28,7 @@
2828
/*初始化参数比如引入组件，proxy,state等*/
2929
import { getCurrentInstance, onMounted } from 'vue'
3030
import Link from './Link'
31-
import Item from './Item'
31+
import Item from './Item.jsx'
3232
import { isExternal } from '@/utils/validate'
3333
import path from 'path'
3434
let { proxy } = getCurrentInstance()

‎src/layout/components/TagsView/index.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
@contextmenu.prevent="openMenu(tag, $event)"
1414
>
1515
{{ tag.title }}
16-
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
16+
17+
<Close v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"></Close>
1718
</router-link>
1819
</div>
1920
<!-- <scroll-pane ref="refScrollPane" class="tags-view-wrapper" @scroll="handleScroll">-->
@@ -44,7 +45,7 @@
4445
<script setup>
4546
// import ScrollPane from './ScrollPane'
4647
import path from 'path'
47-
48+
import { Close } from '@element-plus/icons'
4849
import { onMounted, getCurrentInstance, watch, ref, toRefs, reactive, computed } from 'vue'
4950
//获取store和router
5051
import { useRouter } from 'vue-router'
@@ -312,18 +313,12 @@ let { visible, top, left, selectedTag } = toRefs(state)
312313
.tags-view-item {
313314
border-radius: 3px;
314315
.el-icon-close {
315-
width: 16px;
316-
height: 16px;
317-
vertical-align: 2px;
318-
border-radius: 50%;
319-
text-align: center;
316+
border-radius: 6px;
317+
width: 12px;
318+
height: 12px;
320319
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
321320
transform-origin: 100% 50%;
322-
&:before {
323-
transform: scale(0.6);
324-
display: inline-block;
325-
vertical-align: -3px;
326-
}
321+
vertical-align: -2px;
327322
&:hover {
328323
background-color: #b4bccc;
329324
color: #fff;

‎src/permission.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ router.beforeEach(async (to, from, next) => {
1818
* 1.是否与token 没有去登录页 ,有 如果要去登录页则重定向到首页。没有, 重新定向到登录页
1919
* 2.判断是否权限筛选,是,直接放行。没有，筛选动态路由后，添加动态路由然后放行，
2020
* */
21+
console.log('getTokengetToken', getToken)
2122
let hasToken = settings.isNeedLogin ? getToken() : 'temp_token'
2223
if (hasToken) {
2324
if (to.path === '/login') {

‎src/router/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ export const constantRoutes = [
3737
path: 'dashboard',
3838
name: 'Dashboard',
3939
component: () => import('@/views/dashboard/index'),
40-
meta: { title: 'Dashboard', icon: 'table' }
40+
//using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
41+
meta: { title: 'Dashboard', elSvgIcon: 'Fold' }
4142
}
4243
]
4344
},
@@ -79,7 +80,6 @@ export const constantRoutes = [
7980
name: 'MockTest',
8081
meta: { title: 'Mock-Demo' }
8182
},
82-
8383
{
8484
path: 'svg-icon',
8585
component: () => import('@/views/example/svg-icon/SvgIcon.vue'),
@@ -190,7 +190,7 @@ export const constantRoutes = [
190190
component: Layout,
191191
children: [
192192
{
193-
path: 'https://github.com/jzfai/vue3-admin-electron.git',
193+
path: 'https://github.com/jzfai/vue3-admin-template.git',
194194
meta: { title: 'External Link', icon: 'link' }
195195
}
196196
]

0 commit comments

Comments
 (0)