<template>
|
<div class="lazy-img-container layout-pd">
|
<div class="flex-warp w100" v-if="data.length > 0">
|
<el-row :gutter="15" class="w100">
|
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in data" :key="k" @click="onTableItemClick(v)">
|
<div class="flex-warp-item">
|
<div class="flex-warp-item-box" :class="{ 'item-box-active': activeItem?.id === v.id }">
|
<div class="item-img h100" v-loading="v.loading">
|
<img :data-img="v.url" :data-key="k" :data-lazy-img-list="k" />
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<el-empty v-else description="暂无数据"></el-empty>
|
<template v-if="data.length > 0 && showPage">
|
<el-pagination
|
style="text-align: right"
|
background
|
@size-change="onHandleSizeChange"
|
@current-change="onHandleCurrentChange"
|
:page-sizes="[10, 20, 30]"
|
:current-page="state.tableData.param.pageNum"
|
:page-size="state.tableData.param.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="state.tableData.total"
|
>
|
</el-pagination>
|
</template>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, onMounted, ref, toRefs } from 'vue';
|
import other from '/@/utils/other';
|
import { ImgPickItem } from '/@/components/image/imagePicker/imagePicker';
|
|
const props = defineProps({
|
activeItem: {
|
type: Object,
|
default: {},
|
},
|
showPage: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Array<ImgPickItem>,
|
default: [],
|
},
|
});
|
const { activeItem } = toRefs(props);
|
|
const emits = defineEmits<{
|
(event: 'click', item): void;
|
}>();
|
|
const state = reactive({
|
tableData: {
|
total: 20,
|
loading: false,
|
param: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
},
|
});
|
|
// 当前列表项点击
|
const onTableItemClick = (v) => {
|
emits('click', v);
|
};
|
// 分页点击
|
const onHandleSizeChange = (val: number) => {
|
state.tableData.param.pageSize = val;
|
};
|
// 分页点击
|
const onHandleCurrentChange = (val: number) => {
|
state.tableData.param.pageNum = val;
|
};
|
// 页面加载时
|
onMounted(() => {
|
other.lazyImg('[data-lazy-img-list]', props.data);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.lazy-img-container {
|
.flex-warp {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
margin: 0 -5px;
|
.flex-warp-item {
|
padding: 5px;
|
width: 100%;
|
height: 120px;
|
.flex-warp-item-box {
|
width: 100%;
|
height: 100%;
|
border-radius: 2px;
|
display: flex;
|
flex-direction: column;
|
|
&:hover {
|
cursor: pointer;
|
}
|
|
.item-img {
|
width: 100%;
|
height: 215px;
|
overflow: hidden;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
.item-box-active {
|
border: 5px solid var(--el-color-primary);
|
}
|
</style>
|
