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

package.json

@@ -16,7 +16,8 @@
     "screenfull": "^6.0.0",
     "vue": "^3.2.16",
     "vue-i18n": "^9.2.0-beta.23",
-    "vue-router": "4.0.12"
+    "vue-router": "4.0.12",
+    "vue3-lazyload": "^0.2.5-beta"
   },
   "devDependencies": {
     "@types/node": "^16.11.1",

pnpm-lock.yaml

@@ -40,6 +40,7 @@ specifiers:
   vue-i18n: ^9.2.0-beta.23
   vue-router: 4.0.12
   vue-tsc: ^0.28.7
+  vue3-lazyload: ^0.2.5-beta
 
 dependencies:
   animate.css: r2.cnpmjs.org/animate.css/4.1.1
@@ -51,6 +52,7 @@ dependencies:
   vue: rg.cnpmjs.org/vue/3.2.24
   vue-i18n: rg.cnpmjs.org/vue-i18n/9.2.0-beta.23_vue@3.2.24
   vue-router: rg.cnpmjs.org/vue-router/4.0.12_vue@3.2.24
+  vue3-lazyload: registry.npmjs.org/vue3-lazyload/0.2.5-beta_e9ad48123e44f1efa3c90c8e8375ea6d
 
 devDependencies:
   '@types/node': rg.cnpmjs.org/@types/node/16.11.12
@@ -2341,6 +2343,19 @@ packages:
       vue: rg.cnpmjs.org/vue/3.2.24
     dev: false
 
+  registry.npmjs.org/vue3-lazyload/0.2.5-beta_e9ad48123e44f1efa3c90c8e8375ea6d:
+    resolution: {integrity: sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.2.5-beta.tgz}
+    id: registry.npmjs.org/vue3-lazyload/0.2.5-beta
+    name: vue3-lazyload
+    version: 0.2.5-beta
+    peerDependencies:
+      '@vue/compiler-sfc': '>=3.0.0'
+      vue: '>=3.0.0'
+    dependencies:
+      '@vue/compiler-sfc': rg.cnpmjs.org/@vue/compiler-sfc/3.2.24
+      vue: rg.cnpmjs.org/vue/3.2.24
+    dev: false
+
   registry.npmjs.org/vueuc/0.4.26_vue@3.2.24:
     resolution: {integrity: sha512-IK6TV4468k7Hpj1SXXPYelT/aYqmfa/SYTLFospwJ/uMebRExS1fh5tx6ZT3fSA0OkmCOHmmi2OGke+eSseAgw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/vueuc/-/vueuc-0.4.26.tgz}
     id: registry.npmjs.org/vueuc/0.4.26

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
+        <img class="list-img" v-lazy="item.image" alt="图表图片" />
-          class="list-img"
-          object-fit="contain"
-          preview-disabled
-          :src="item.image"
-          :fallback-src="requireFallbackImg()"
-        />
       </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>