lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:element-plus字体图标不显示问题修复

This commit is contained in:
有来技术 2021-12-01 22:56:31 +08:00
parent 76b0ba1035
commit d3aca2d8b2
2 changed files with 51 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/layout/components/Navbar.vue
View File

@ -1,51 +1,55 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar"/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
<div class="right-menu">
<template v-if="device!=='mobile'">
<!-- <search id="header-search" class="right-menu-item" />
<error-log class="errLog-container right-menu-item hover-effect" />-->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>-->
<!-- <search id="header-search" class="right-menu-item" />
<error-log class="errLog-container right-menu-item hover-effect" />-->
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>-->
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom" />
<el-icon>
<caret-bottom/>
</el-icon>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/">
<el-dropdown-item>Dashboard</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>首页</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>Gitee</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>项目文档</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
import {reactive,computed,toRefs} from "vue";
import {reactive, computed, toRefs} from "vue";
import {useStore} from "@/store";
import {useRoute,useRouter} from "vue-router"
import {useRoute, useRouter} from "vue-router"
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import Screenfull from '@/components/screenfull/index.vue'
@ -71,16 +75,16 @@ export default {
return store.state.user.avatar
})
const state=reactive({
toggleSideBar:()=>{
const state = reactive({
toggleSideBar: () => {
store.dispatch('app/toggleSideBar', false)
},
logout:()=>{
logout: () => {
store.dispatch('user/logout')
router.push(`/login?redirect=${route.fullPath}`)
}
})
return{
return {
sidebar,
device,
avatar,

16
src/main.ts
View File

@ -5,16 +5,26 @@ import {store,key} from './store'
import '@/styles/index.scss'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/index.css'
import 'virtual:svg-icons-register';
// @see https://blog.csdn.net/qq_37213281/article/details/121422027
import * as ElIconModules from '@element-plus/icons'
import '@/permission'
const app=createApp(App)
// 统一注册el-icon图标
for(let iconName in ElIconModules){
// @ts-ignore
app.component(iconName,ElIconModules[iconName] )
}
app
.use(router)
.use(store,key)
.use(ElementPlus)
.mount('#app')
.mount('#app')