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

This commit is contained in:
MTrun
2022-03-01 16:39:04 +08:00
parent 013edc4f11
commit a63efa5d26
9 changed files with 34 additions and 18 deletions
@@ -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'
@@ -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'
@@ -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'
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>