feat: 图表组件图片换成懒加载

src/plugins/directives.ts

@@ -1,4 +1,6 @@
 import { App } from 'vue';
+import VueLazyLoad from 'vue3-lazyload'
+import { requireErrorImg } from '@/utils'
 
 // import { x } from '@/directives';
 
@@ -7,5 +9,9 @@ import { App } from 'vue';
  * @param app
  */
 export function setupDirectives(app: App) {
+  // 图片懒加载
+  app.use(VueLazyLoad, {
+    error: requireErrorImg(),
+  })
   // app.directive('x', x);
 }

src/utils/utils.ts

@@ -49,7 +49,7 @@ export const renderLang = (lang: string, set = {}, tag = 'span') => {
  * @param name
  * @returns url
  */
-export const requireFallbackImg = () => {
+export const requireErrorImg = () => {
   return Image_404
 }
 

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -13,13 +13,7 @@
         <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
       </div>
       <div class="list-center go-flex-center">
-        <n-image
-          class="list-img"
-          object-fit="contain"
-          preview-disabled
-          :src="item.image"
-          :fallback-src="requireFallbackImg()"
-        />
+        <img class="list-img" v-lazy="item.image" alt="图表图片" />
       </div>
     </div>
   </div>
@@ -28,7 +22,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
-import { requireFallbackImg, componentInstall } from '@/utils'
+import { requireErrorImg, componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
 import omit from 'lodash/omit'

src/views/chart/ContentLayers/components/ListItem/index.vue

@@ -9,7 +9,7 @@
         object-fit="contain"
         preview-disabled
         :src="image"
-        :fallback-src="requireFallbackImg()"
+        :fallback-src="requireErrorImg()"
       />
       <n-ellipsis>
         <n-text class="list-text">
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { ref, toRefs, computed } from 'vue'
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 

src/views/project/items/components/Card/index.vue

@@ -21,7 +21,7 @@
               requireUrl('project/moke-20211219181327.png')
             "
             :alt="cardData.title"
-            :fallback-src="requireFallbackImg()"
+            :fallback-src="requireErrorImg()"
           />
         </div>
       </div>
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, PropType } from 'vue'
-import { renderIcon, renderLang,  requireFallbackImg } from '@/utils'
+import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn'
 import { Chartype } from '../../index.d'

src/views/project/mtTemplate/index.vue

@@ -5,7 +5,7 @@
         object-fit="contain"
         height="300"
         preview-disabled
-        :src="requireFallbackImg()"
+        :src="requireErrorImg()"
       />
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 </script>
 
 <style lang="scss" scoped>

src/views/project/templateMarket/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="go-project-template-market">
     <n-space vertical>
-      <n-image object-fit="contain" height="300" preview-disabled :src="requireFallbackImg()" />
+      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()" />
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
   </div>
 </template>
 
 <script setup lang="ts">
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 </script>
 
 <style lang="scss" scoped>