mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
code: remove v-lazy-image
This commit is contained in:
parent
4467227b47
commit
3c3e0ce0ae
@ -30,7 +30,6 @@
|
|||||||
"qr-code-styling": "^1.6.0-rc.1",
|
"qr-code-styling": "^1.6.0-rc.1",
|
||||||
"selecto": "^1.13.0",
|
"selecto": "^1.13.0",
|
||||||
"throttle-debounce": "^3.0.1",
|
"throttle-debounce": "^3.0.1",
|
||||||
"v-lazy-image": "^2.1.1",
|
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.0-0",
|
"vue-router": "^4.0.0-0",
|
||||||
"vuedraggable": "^4.1.0",
|
"vuedraggable": "^4.1.0",
|
||||||
|
@ -3,26 +3,24 @@
|
|||||||
* @Date: 2021-12-16 16:20:16
|
* @Date: 2021-12-16 16:20:16
|
||||||
* @Description: 瀑布流组件
|
* @Description: 瀑布流组件
|
||||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||||
* @LastEditTime: 2023-10-03 22:58:32
|
* @LastEditTime: 2023-10-03 23:22:46
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div ref="imgWaterFall" :style="{ height: countHeight + 'px' }" class="img-water-fall">
|
<div ref="imgWaterFall" :style="{ height: countHeight + 'px' }" class="img-water-fall">
|
||||||
<!-- backgroundImage: `url(${item.cover})` -->
|
<!-- backgroundImage: `url(${item.cover})` -->
|
||||||
<div v-for="(item, index) in list" :key="index + 'iwf'" :style="{ top: item.top + 'px', left: item.left + 'px', width: width + 'px', height: item.height + 'px' }" class="img-box" @click.stop="selectItem(item, index)">
|
<div v-for="(item, index) in list" :key="index + 'iwf'" :style="{ top: item.top + 'px', left: item.left + 'px', width: width + 'px', height: item.height + 'px' }" class="img-box" @click.stop="selectItem(item, index)">
|
||||||
<v-lazy-image v-if="!item.fail" class="img" :src="item.cover" @error="loadError(item)" />
|
<el-image v-if="!item.fail" class="img" :src="item.cover" lazy loading="lazy" @error="loadError(item)" />
|
||||||
<div v-else class="fail_img">{{ item.title }}</div>
|
<div v-else class="fail_img">{{ item.title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vLazyImage from 'v-lazy-image'
|
|
||||||
const NAME = 'img-water-fall'
|
const NAME = 'img-water-fall'
|
||||||
import { defineComponent, toRefs, reactive, watch } from 'vue'
|
import { defineComponent, toRefs, reactive, watch } from 'vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: NAME,
|
name: NAME,
|
||||||
components: { vLazyImage },
|
|
||||||
props: {
|
props: {
|
||||||
listData: {
|
listData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user