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

refactor: icon优化

This commit is contained in:
haoxr 2023-01-15 12:55:13 +08:00
parent 5aafa2907d
commit efc04bf334
12 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/IconSelect/index.vue
View File

@ -109,7 +109,7 @@ onMounted(() => {
@click="onIconSelect(iconName)"
>
<el-tooltip :content="iconName" placement="bottom" effect="light">
<svg-icon color="#999" :icon-name="iconName" />
<svg-icon color="#999" :icon-class="iconName" />
</el-tooltip>
</li>
</ul>

6
src/components/LangSelect/index.vue
View File

@ -23,8 +23,10 @@ function handleLanguageChange(lang: string) {
trigger="click"
@command="handleLanguageChange"
>
<div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
<svg-icon icon-name="language" />
<div
class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
>
<svg-icon icon-class="language" />
</div>
<template #dropdown>
<el-dropdown-menu>

9
src/components/Screenfull/index.vue
View File

@ -1,15 +1,14 @@
<template>
<div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
>
<svg-icon
:icon-name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
@click="toggle"
/>
</div>
</template>
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import SvgIcon from '@/components/SvgIcon/index.vue';
const { isFullscreen, toggle } = useFullscreen();
</script>

9
src/components/SizeSelect/index.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import SvgIcon from '@/components/SvgIcon/index.vue';
const appStore = useAppStore();
@ -20,8 +17,10 @@ function handleSizeChange(size: string) {
<template>
<el-dropdown trigger="click" @command="handleSizeChange">
<div class="cursor-pointerw-[40px] h-[50px] leading-[50px] text-center">
<svg-icon icon-name="size" />
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
>
<svg-icon icon-class="size" />
</div>
<template #dropdown>
<el-dropdown-menu>

4
src/components/SvgIcon/index.vue
View File

@ -14,7 +14,7 @@ const props = defineProps({
type: String,
default: 'icon'
},
iconName: {
iconClass: {
type: String,
required: false
},
@ -27,7 +27,7 @@ const props = defineProps({
}
});
const symbolId = computed(() => `#${props.prefix}-${props.iconName}`);
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped>

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

@ -65,7 +65,7 @@ function logout() {
</div>
<!-- 头像 -->
<el-dropdown trigger="click">
<div class="flex justify-center items-center pr-[20px]">
<div class="flex justify-center items-center mx-2">
<img
:src="userStore.avatar + '?imageView2/1/w/80/h/80'"
class="w-[40px] h-[40px] rounded-lg"

4
src/layout/components/Sidebar/SidebarItem.vue
View File

@ -78,7 +78,7 @@ function resolvePath(routePath: string) {
>
<svg-icon
v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
:icon-name="onlyOneChild.meta.icon"
:icon-class="onlyOneChild.meta.icon"
/>
<template #title>
{{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
@ -92,7 +92,7 @@ function resolvePath(routePath: string) {
<template #title>
<svg-icon
v-if="item.meta && item.meta.icon"
:icon-name="item.meta.icon"
:icon-class="item.meta.icon"
/>
<span v-if="item.meta && item.meta.title">{{
translateRouteTitleI18n(item.meta.title)

12
src/layout/components/TagsView/index.vue
View File

@ -271,27 +271,27 @@ onMounted(() => {
:style="{ left: left + 'px', top: top + 'px' }"
>
<li @click="refreshSelectedTag(selectedTag)">
<svg-icon icon-name="refresh" />
<svg-icon icon-class="refresh" />
刷新
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<svg-icon icon-name="close" />
<svg-icon icon-class="close" />
关闭
</li>
<li @click="closeOtherTags">
<svg-icon icon-name="close_other" />
<svg-icon icon-class="close_other" />
关闭其它
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<svg-icon icon-name="close_left" />
<svg-icon icon-class="close_left" />
关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<svg-icon icon-name="close_right" />
<svg-icon icon-class="close_right" />
关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
<svg-icon icon-name="close_all" />
<svg-icon icon-class="close_all" />
关闭所有
</li>
</ul>

8
src/views/dashboard/index.vue
View File

@ -23,7 +23,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-user">
<svg-icon icon-name="uv" size="4em" />
<svg-icon icon-class="uv" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
@ -35,7 +35,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-name="message" size="4em" />
<svg-icon icon-class="message" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息数</div>
@ -47,7 +47,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-name="money" size="4em" />
<svg-icon icon-class="money" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">收入金额</div>
@ -58,7 +58,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-name="shopping" size="4em" />
<svg-icon icon-class="shopping" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单数</div>

6
src/views/login/index.vue
View File

@ -15,7 +15,7 @@
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-name="user" />
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
@ -35,7 +35,7 @@
>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-name="password" />
<svg-icon icon-class="password" />
</span>
<el-input
ref="passwordRef"
@ -52,7 +52,7 @@
/>
<span class="show-pwd" @click="showPwd">
<svg-icon
:icon-name="passwordType === 'password' ? 'eye' : 'eye-open'"
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>

4
src/views/system/dict/index.vue
View File

@ -29,7 +29,7 @@ const handleDictTypeClick = (row: any) => {
<el-col :span="10" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon icon-name="dict" />
<svg-icon icon-class="dict" />
字典类型
</template>
<dict-type @dictClick="handleDictTypeClick" />
@ -39,7 +39,7 @@ const handleDictTypeClick = (row: any) => {
<el-col :span="14" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon icon-name="dict_item" />
<svg-icon icon-class="dict_item" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="typeCode" size="small">{{
typeName

2
src/views/system/menu/index.vue
View File

@ -40,7 +40,7 @@
<el-table-column label="菜单名称">
<template #default="scope">
<svg-icon
:icon-name="
:icon-class="
scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
"
/>