From 6e7acd5062824d5aae2ed345898d761a93879de0 Mon Sep 17 00:00:00 2001
From: heimawl <1785969728@qq.com>
Date: 星期五, 02 六月 2023 17:16:31 +0800
Subject: [PATCH] 组件库整理，依赖安装、excel导入导入方法整理
---
src/components/SvgIcon/index.vue | 38 ++++++++++++++++++++++----------------
1 files changed, 22 insertions(+), 16 deletions(-)
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index e4bf5ad..97456a4 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,47 +1,53 @@
+<!-- svg灏佽 -->
<template>
- <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+ <div
+ v-if="isExternal"
+ :style="styleExternalIcon"
+ class="svg-external-icon svg-icon"
+ v-on="$listeners"
+ />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
export default {
- name: 'SvgIcon',
+ name: "SvgIcon",
props: {
iconClass: {
type: String,
- required: true
+ required: true,
},
className: {
type: String,
- default: ''
- }
+ default: "",
+ },
},
computed: {
isExternal() {
- return isExternal(this.iconClass)
+ return isExternal(this.iconClass);
},
iconName() {
- return `#icon-${this.iconClass}`
+ return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
- return 'svg-icon ' + this.className
+ return "svg-icon " + this.className;
} else {
- return 'svg-icon'
+ return "svg-icon";
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
- '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
- }
- }
- }
-}
+ "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
+ };
+ },
+ },
+};
</script>
<style scoped>
@@ -55,7 +61,7 @@
.svg-external-icon {
background-color: currentColor;
- mask-size: cover!important;
+ mask-size: cover !important;
display: inline-block;
}
</style>
--
Gitblit v1.9.3