From 8e221414b8f7ffae6492eed811a9a9643d73df95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 18 Nov 2022 16:59:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=9A=E7=94=A8Error=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common.scss      |  2 +-
 src/components/common/Error.vue | 29 +++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index aafe8010..9723dac5 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -45,7 +45,7 @@ body {
 }
 
 /* 请求报错样式关于popover的修改 */
-.error-hover {
+.error-popover {
   //min-width: 30px !important;
   display: inline-block;
   background: #FFE7E6 !important;
diff --git a/src/components/common/Error.vue b/src/components/common/Error.vue
index 44b9d60a..48186b81 100644
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -6,16 +6,15 @@
           placement="top-start"
           trigger="hover"
           :visible-arrow="false"
-          class="error-popover"
-          popper-class="error-hover"
-          style="background: #1b2e3b !important;"
+          popper-class="error-popover"
           :content="content">
         <template #reference>
           <span>
             <svg class="icon error-icon" aria-hidden="true">
               <use xlink:href="#cn-icon-baocuo"></use>
             </svg>
-<!--            <i v-if="icon" :class="`one-icon-${icon}`"></i>-->
+<!--            为后续自定义icon插槽做预备-->
+<!--            <i v-if="icon" :class="`icon cn-icon-${icon}`"></i>-->
           </span>
         </template>
       </el-popover>
@@ -41,27 +40,47 @@
   </div>
 </template>
 
+<!--  start----------------调用方式----------------start  -->
+<!--
+   组件在全局注册了，调用时: <chart-error :content="content"></chart-error>
+-->
+<!--
+   在标题之后显示：<chart-error small :content="content" />
+ -->
+<!--
+  自定义弹窗宽度：<chart-error small width="300" :content="content" />
+-->
+<!--
+  自定义icon图标：<chart-error small icon="baocuo" :content="content" />，此时icon全称为'cn-icon-baocuo'
+-->
+<!--  end----------------调用方式----------------end  -->
 <script>
 export default {
   name: 'Error',
   props: {
+    // 模块标识，small即标题之后出现icon图标，鼠标移入显示报错信息，非small即在div内显示报错信息
     small: {
       type: String
     },
+    // 报错信息内容，如果不传，默认为"Error"
     content: {
       type: String,
       default: 'Error！'
     },
+    // 报错信息模块宽度，如果选择small，则为弹窗宽度
     width: {
       type: String
     },
+    // 报错信息模块最大宽度
     maxWidth: {
       type: String,
       default: '350'
     },
+    // 自定义icon图标
     icon: {
       type: String
     },
+    // 自定义svg图标
     svg: {
       type: String
     }
@@ -87,10 +106,12 @@ export default {
       }
 
       if (this.width) {
+        // 避免宽度出现负数的情况
         this.localWidth = Math.abs(parseFloat(this.width)) + 'px'
       }
 
       if (this.maxWidth) {
+        // 避免宽度出现负数的情况
         this.localMaxWidth = Math.abs(parseFloat(this.maxWidth)) + 'px'
       }
     },