github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: load images

Browse Source
This commit is contained in:
ShawnPhang 2023-10-04 00:25:09 +08:00
parent 3c3e0ce0ae
commit 9f0e0dd73c
6 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/main.less
View File

@ -105,5 +105,5 @@ p {
pointer-events: none;
}
.hide {
opacity: 0;
opacity: 0 !important;
}

4
src/common/hooks/dragHelper.ts
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2023-07-10 14:58:48
* @Description: 拖拽优化
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-11 11:10:03
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-04 00:14:19
*/
import store from '@/store'
export default class dragHelper {

4
src/components/modules/panel/wrap/BgImgListWrap.vue
View File

@ -3,7 +3,7 @@
* @Date: 2021-08-27 15:16:07
* @Description: 背景图
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-03 18:53:02
* @LastEditTime: 2023-10-04 00:21:34
-->
<template>
<div class="wrap">
@ -13,7 +13,7 @@
<ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
<div class="list">
<el-tooltip v-for="(item, i) in bgList" :key="i + 'i'" :content="`<p style='max-width:140px;'><b>${item.description}</b></p><p>@${item.author}</p>`" offset="0" effect="light" placement="top-start" hide-after="0" :enterable="false" raw-content>
<el-image class="list__img" :src="item.thumb" fit="cover" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
<el-image class="list__img" :src="item.thumb" fit="cover" lazy loading="lazy" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
</el-tooltip>
</div>
<div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>

8
src/components/modules/panel/wrap/CompListWrap.vue
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07
* @Description: 素材列表，主要用于文字组合列表
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
* @LastEditTime: 2023-09-01 14:14:27
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-04 00:23:04
-->
<template>
<div class="wrap">
@ -24,7 +24,7 @@
<div v-else class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
<div class="list-wrap">
<div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
<el-image class="list__img-thumb" :src="item.cover" fit="contain"></el-image>
<el-image class="list__img-thumb" :src="item.cover" fit="contain" lazy loading="lazy"></el-image>
</div>
</div>
</div>
@ -35,7 +35,7 @@
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
<div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
<!-- <edit-model :isComp="true" @action="action($event, item, i)"> -->
<el-image class="list__img" :src="item.cover" fit="contain"> </el-image>
<el-image class="list__img" :src="item.cover" fit="contain" lazy loading="lazy" />
<!-- </edit-model> -->
</div>
</el-space>

8
src/components/modules/panel/wrap/GraphListWrap.vue
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07
* @Description: 素材列表
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
* @LastEditTime: 2023-09-01 14:18:30
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-04 00:23:52
-->
<template>
<div class="wrap">
@ -23,7 +23,7 @@
<div v-else class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
<div class="list-wrap">
<div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
<el-image class="list__img-thumb" :src="item.thumb" fit="contain"></el-image>
<el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
</div>
</div>
</div>
@ -33,7 +33,7 @@
<span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
<div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
<el-image class="list__img" :src="item.thumb" fit="contain"></el-image>
<el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
</div>
</el-space>
<div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>

15
src/components/modules/panel/wrap/components/photoList.vue
View File

@ -2,21 +2,21 @@
* @Author: ShawnPhang
* @Date: 2022-02-23 15:48:52
* @Description: 图片列表组件 Bookshelf Layout
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-17 15:20:25
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-04 00:20:31
-->
<template>
<ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)">
<div class="list">
<div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px' }" class="list__img" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
<div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px' }" class="list__img transparent-bg" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
<edit-model v-if="edit" :options="edit" :data="{ item, i }">
<div v-if="item.isDelect" class="list__mask">已删除</div>
<img class="img" :src="item.thumb || item.cover || item.url" />
<!-- <img class="img" :src="item.thumb || item.cover || item.url" /> -->
<el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
</edit-model>
<template v-else>
<img class="img" :src="item.thumb || item.cover || item.url" />
<el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
</template>
<!-- <el-image :src="item.thumb || item.url" fit="cover"></el-image> -->
</div>
</div>
<div v-if="!isDone" v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
@ -178,6 +178,7 @@ export default defineComponent({
}
.img {
transform-origin: center;
display: block;
width: 100%;
height: 100%;
}
@ -185,7 +186,7 @@ export default defineComponent({
position: relative;
padding: 4px 0 0 14px;
&__img {
background: #f1f2f4;
// background: #f1f2f4;
display: inline-block;
cursor: pointer;
margin: 0 6px 2px 0;