feat: FImage 组件基本完成

Author: Tyh2001

packages/fighting-components/image/src/image.vue

@@ -47,7 +47,7 @@
     />
   </div>
 
-  <div v-else class="f-image f-image-error">
+  <div v-else class="f-image-error">
     <slot name="error">
       <span class="f-image-error-text">{{ alt || '加载失败' }}</span>
     </slot>

packages/fighting-theme/src/image.scss

@@ -146,12 +146,14 @@
 }
 
 // 加载失败
-.f-image.f-image-error {
+.f-image-error {
   display: inline-block;
-  background-color: #eee;
-  padding: 0 3px;
-  border-radius: 3px;
+
   .f-image-error-text {
+    display: inline-block;
+    background-color: #eee;
+    padding: 0 3px;
+    border-radius: 3px;
     font-size: 15px;
     color: #333;
   }

start/src/App.vue

@@ -2,8 +2,8 @@
   <div style="height: 1000px"></div>
   <f-image
     root-margin="100px"
-    src="https://tianyuhao.cn/images/auto/1.png"
-    err-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+    src="https://tianyuhao.cn/images/auto/1.png2"
+    err-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg2"
     :draggable="false"
     lazy
     alt="ada"
@@ -17,7 +17,13 @@
     preview-round="120px"
     caption="回到家啊回到家萨的好时机啊"
     :preview-show-index="32"
-  />
+    @load="load"
+    @error="err"
+  >
+    <template #error>
+      <h1>加载失败</h1>
+    </template>
+  </f-image>
   <span>12</span>
 </template>