feature: svg支持使用elementpush icon 组件

jsxiaosi · Nov 27, 2021 · dca6e19 · dca6e19
1 parent e14dfe5
commit dca6e19
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 31 deletions.
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
@@ -1,12 +1,16 @@
 <template>
-	<svg :class="className" aria-hidden="true">
-		<use :xlink:href="symbolId" :fill="color" />
-	</svg>
+	<div :class="className">
+		<el-icon v-if="isELIcon">
+			<component :is="name" />
+		</el-icon>
+		<svg v-else class="svg" aria-hidden="true">
+			<use :xlink:href="symbolId" :fill="color" />
+		</svg>
+	</div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-
 const props = defineProps({
 	// route object
 	prefix: {
@@ -26,5 +30,20 @@ const props = defineProps({
 		default: '',
 	},
 })
+
+const isELIcon = computed(() => props.name.indexOf('iEL') != -1)
+
 const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 </script>
+
+<style lang="scss" scoped>
+.el-icon {
+	width: 1em;
+	height: 1em;
+}
+
+.svg {
+	width: 1em;
+	height: 1em;
+}
+</style>
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -6,6 +6,7 @@ export const lang = {
 		userInfo: 'UserInfo',
 		userList: 'UserList',
 		userDateil: 'UserDateil',
+		thirdParty: 'Third party',
 	},
 	api: {
 		errMsg401: 'The user does not have permission!',

diff --git a/src/locales/zh-ch.ts b/src/locales/zh-ch.ts
@@ -6,6 +6,7 @@ export const lang = {
 		userInfo: '用户管理',
 		userList: '用户列表',
 		userDateil: '用户详情',
+		thirdParty: '第三方',
 	},
 	api: {
 		errMsg401: '用户没有权限!',

diff --git a/src/router/otherRoute.ts b/src/router/otherRoute.ts
@@ -10,7 +10,7 @@ export const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 		redirect: '/useradmin/userlist/',
 		name: '用户管理',
 		alwaysShow: true,
-		meta: { title: t('route.userInfo'), icon: 'daosanjiao' },
+		meta: { title: t('route.userInfo'), icon: 'iEL-avatar' },
 		children: [
 			{
 				path: 'userlist',
@@ -26,6 +26,16 @@ export const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 			},
 		],
 	},
+	{
+		path: '/external-link',
+		component: Layout,
+		children: [
+			{
+				path: 'https://gitlab.com/SuperCuteXiaoSi/vite-vue3-template',
+				meta: { title: t('route.thirdParty'), icon: 'iEL-operation' },
+			},
+		],
+	},
 	// {
 	// 	path: '/date',
 	// 	component: Layout,

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -30,26 +30,29 @@
 		transition: width 0.28s;
 
 		.el-menu-item {
-			color: $menuText;
+			color: $menuItemText;
 			border-left: #{$menuItemBorderLeft} solid 3px;
 
 			.menu-item-svg {
-				width: 1em;
-				height: 1em;
 				margin-right: 16px;
+				line-height: 0;
+
+				.el-icon {
+					font-size: 14px;
+				}
 
 				use {
-					fill: $menuText;
+					fill: $menuItemText;
 				}
 			}
 		}
 
 		.el-menu-item.is-active {
 			color: $menuItemActiveText;
-			background-color: $subMenuItemBg !important;
-			border-left: #{$subMenuItemBorderLeft} solid 3px !important;
+			background-color: $menuItemActiveBg !important;
+			border-left: #{$menuItemActiveBorderLeft} solid 3px !important;
 
-			.menu-item-svg > use {
+			.menu-item-svg use {
 				fill: $menuItemActiveText !important;
 			}
 		}
@@ -116,9 +119,12 @@
 			border-left: $menuBg solid 3px;
 
 			.sub-menu-svg {
-				width: 1em;
-				height: 1em;
 				margin-right: 16px;
+				line-height: 0;
+
+				.el-icon {
+					font-size: 14px;
+				}
 
 				use {
 					fill: $menuText;
@@ -138,7 +144,7 @@
 		.is-active > .el-sub-menu__title {
 			color: $menuActiveText !important;
 
-			.sub-menu-svg > use {
+			.sub-menu-svg use {
 				fill: $menuActiveText !important;
 			}
 		}
@@ -188,7 +194,7 @@
 		.el-sub-menu {
 			overflow: hidden;
 
-			svg {
+			.sub-menu-svg {
 				margin-left: 16px;
 			}
 
@@ -220,6 +226,9 @@
 			// .sub-el-icon {
 			//   margin-left: 19px;
 			// }
+			.menu-item-svg {
+				margin-left: 16px;
+			}
 
 			.el-sub-menu__icon-arrow {
 				display: none;
@@ -311,7 +320,7 @@
 	.nest-menu .is-active.el-menu-item {
 		color: $menuItemActiveText !important;
 
-		.menu-item-svg > use {
+		.menu-item-svg use {
 			fill: $menuItemActiveText !important;
 		}
 	}
@@ -322,9 +331,12 @@
 		overflow-y: auto;
 
 		.menu-item-svg {
-			width: 1em;
-			height: 1em;
 			margin-right: 16px;
+			line-height: 0;
+
+			use {
+				fill: $menuItemText;
+			}
 		}
 
 		&::-webkit-scrollbar-track-piece {

diff --git a/src/styles/variables-dark.scss b/src/styles/variables-dark.scss
@@ -12,11 +12,12 @@ $menuActiveText: #fff; //选中的文字颜色
 
 $menuItemBg: #212121; //二级背景颜色
 $menuItemBorderLeft: #212121; //未选中的背景颜色
+$menuItemText: #909399; //二级文字颜色
+$menuItemHover: #212121; //二级焦点背景颜色
 $menuItemHoverText: #fff;
 $menuItemActiveText: #fff;
-$subMenuItemBg: #2d2d2d; //二级选中背景颜色
-$subMenuItemBorderLeft: #409eff; //二级左描边背景颜色
-$menuItemHover: #212121; //二级焦点背景颜色
+$menuItemActiveBg: #2d2d2d; //二级选中背景颜色
+$menuItemActiveBorderLeft: #409eff; //二级左描边背景颜色
 
 $appMainBgColor: #f5f6fa; //app-mian背景颜色
 $navBarColor: #151515; //顶部导航栏背景颜色

diff --git a/src/styles/variables-day.scss b/src/styles/variables-day.scss
@@ -21,11 +21,12 @@ $menuActiveText: #409eff; //选中的文字颜色
 
 $menuItemBg: #fff; //二级背景颜色
 $menuItemBorderLeft: #fff; //二级未选中的背景颜色
+$menuItemText: #909399; //二级文字颜色
+$menuItemHover: #f3f3f3; //二级焦点背景颜色
 $menuItemHoverText: #409eff; //二级焦点文字颜色
 $menuItemActiveText: #409eff;
-$subMenuItemBg: #ecf5ff; //二级选中背景颜色
-$subMenuItemBorderLeft: #409eff; //二级左描边背景颜色
-$menuItemHover: #f3f3f3; //二级焦点背景颜色
+$menuItemActiveBg: #ecf5ff; //二级选中背景颜色
+$menuItemActiveBorderLeft: #409eff; //二级左描边背景颜色
 
 $appMainBgColor: #f5f6fa; //app-mian背景颜色
 $navBarColor: #fff; //顶部导航栏背景颜色

diff --git a/src/utils/mainConfig.ts b/src/utils/mainConfig.ts
@@ -11,10 +11,17 @@ export const configMainElementPlus = (app: App<Element>) => {
 	app.use(ElementPlus)
 	const myElIconModules: any = ElIconModules
 	for (const iconName in myElIconModules) {
-		app.component(iconName, myElIconModules[iconName])
+		app.component(transElIconName(iconName), myElIconModules[iconName])
+		console.log('还是这里先来？')
 	}
 }
 
+function transElIconName(iconName: string) {
+	return (
+		'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
+	)
+}
+
 // 定义全局钩子
 export const configMainGlobalProperties = (app: App<Element>) => {
 	// 全局定义属性
@@ -27,7 +34,3 @@ export const configMainGlobalProperties = (app: App<Element>) => {
 	 * proxy.foo
 	 */
 }
-
-// function transElIconName(iconName: string) {
-//   return 'i' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
-// }
diff --git a/src/views/useradmin/userlist/index.vue b/src/views/useradmin/userlist/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="page-container">
-		<el-icon><baseball /></el-icon>
+		<el-icon><iEL-baseball /></el-icon>
 		<SvgIcon name="daosanjiao"></SvgIcon>
 		{{ t('login.title') }}
 		<el-date-picker