<template>
|
<div v-if="templateImageList.length > 0" class="fabric-preview-image-list">
|
<el-image
|
v-for="(image, index) in templateImageList"
|
:key="image.path"
|
:src="image.path"
|
:class="[
|
'fabric-preview-image-list-item',
|
{ active: templateEditState.currentImageIndex === index },
|
]"
|
fit="cover"
|
@click="handleClick(index)"
|
/>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useTemplateDetailContext, useCanvasActions } from '../hooks/context';
|
import { setOSSLink } from '@/utils';
|
import useSelect from '../hooks/select';
|
|
defineOptions({
|
name: 'previewImageList',
|
});
|
|
const { fabric, canvasEditor } = useSelect();
|
|
const { templateImageList, templateEditState, templateDetail } = useTemplateDetailContext();
|
|
const { toggleCanvas, setBackgroundImage, clear } = useCanvasActions();
|
|
watch(templateDetail, async (newValue, oldValue) => {
|
if (!!newValue.id && !oldValue.id) {
|
if (newValue.templateJsonData && templateEditState.jsonMap[0]) {
|
canvasEditor.loadJSON(templateEditState.jsonMap[0], () => {
|
canvasEditor.canvas.discardActiveObject();
|
});
|
// canvasEditor.canvas.loadFromJSON(templateEditState.jsonMap[0], () => {});
|
} else {
|
if (templateImageList.value.length > 0) {
|
setBackgroundImage(templateImageList.value[0].path);
|
}
|
}
|
}
|
});
|
|
function handleClick(index: number) {
|
toggleCanvas(index);
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.fabric-preview-image-list {
|
.fabric-preview-image-list-item {
|
margin-bottom: 10px;
|
width: 100%;
|
height: 300px;
|
border: 1px solid getCssVar('border-color', 'lighter');
|
cursor: pointer;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
&.active {
|
border-color: getCssVar('color', 'primary');
|
}
|
}
|
}
|
</style>
|
