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; pointer-events: none;
} }
.hide { .hide {
opacity: 0; opacity: 0 !important;
} }

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

@ -2,8 +2,8 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2023-07-10 14:58:48 * @Date: 2023-07-10 14:58:48
* @Description: 拖拽优化 * @Description: 拖拽优化
* @LastEditors: ShawnPhang <site: book.palxp.com> * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-07-11 11:10:03 * @LastEditTime: 2023-10-04 00:14:19
*/ */
import store from '@/store' import store from '@/store'
export default class dragHelper { 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 * @Date: 2021-08-27 15:16:07
* @Description: 背景图 * @Description: 背景图
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-03 18:53:02 * @LastEditTime: 2023-10-04 00:21:34
--> -->
<template> <template>
<div class="wrap"> <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"> <ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
<div class="list"> <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-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> </el-tooltip>
</div> </div>
<div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</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 * @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07 * @Date: 2021-08-27 15:16:07
* @Description: 素材列表，主要用于文字组合列表 * @Description: 素材列表，主要用于文字组合列表
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-01 14:14:27 * @LastEditTime: 2023-10-04 00:23:04
--> -->
<template> <template>
<div class="wrap"> <div class="wrap">
@ -24,7 +24,7 @@
<div v-else class="loading"><i class="el-icon-loading"></i> 拼命加载中</div> <div v-else class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
<div class="list-wrap"> <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)"> <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> </div>
</div> </div>
@ -35,7 +35,7 @@
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list"> <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)"> <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)"> --> <!-- <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> --> <!-- </edit-model> -->
</div> </div>
</el-space> </el-space>

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

@ -2,8 +2,8 @@
* @Author: ShawnPhang * @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07 * @Date: 2021-08-27 15:16:07
* @Description: 素材列表 * @Description: 素材列表
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-01 14:18:30 * @LastEditTime: 2023-10-04 00:23:52
--> -->
<template> <template>
<div class="wrap"> <div class="wrap">
@ -23,7 +23,7 @@
<div v-else class="loading"><i class="el-icon-loading" /> 拼命加载中</div> <div v-else class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
<div class="list-wrap"> <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)"> <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> </div>
</div> </div>
@ -33,7 +33,7 @@
<span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span> <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"> <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)"> <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> </div>
</el-space> </el-space>
<div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div> <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 * @Author: ShawnPhang
* @Date: 2022-02-23 15:48:52 * @Date: 2022-02-23 15:48:52
* @Description: 图片列表组件 Bookshelf Layout * @Description: 图片列表组件 Bookshelf Layout
* @LastEditors: ShawnPhang <site: book.palxp.com> * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-07-17 15:20:25 * @LastEditTime: 2023-10-04 00:20:31
--> -->
<template> <template>
<ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)"> <ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)">
<div class="list"> <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 }"> <edit-model v-if="edit" :options="edit" :data="{ item, i }">
<div v-if="item.isDelect" class="list__mask">已删除</div> <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> </edit-model>
<template v-else> <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> </template>
<!-- <el-image :src="item.thumb || item.url" fit="cover"></el-image> -->
</div> </div>
</div> </div>
<div v-if="!isDone" v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div> <div v-if="!isDone" v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
@ -178,6 +178,7 @@ export default defineComponent({
} }
.img { .img {
transform-origin: center; transform-origin: center;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -185,7 +186,7 @@ export default defineComponent({
position: relative; position: relative;
padding: 4px 0 0 14px; padding: 4px 0 0 14px;
&__img { &__img {
background: #f1f2f4; // background: #f1f2f4;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
margin: 0 6px 2px 0; margin: 0 6px 2px 0;