archives/src/test/index.vue

<template>
    <div class="hc-page-box">
        <HcCard title="测试">
            <div class="flex h-full">
                <div class="w-96">
                    <template v-for="(item, index) in pdfData" :key="index">
                        <div class="p-3" @click="pdfDataClick(item, index)">
                            {{ item.name }}
                        </div>
                    </template>
                </div>
                <div class="flex-1">
                    <HcPdf v-if="pdfItem.pdf" :sign="logoName" :src="pdfItem.pdf" :dom="pdfItem.hcSignImageArr" :batch="true" @change="pdfChange" />
                </div>
            </div>
        </HcCard>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import HcPdf from '../views/tasks/components/hc-pdf1.vue'
import logoName from '~src/assets/logo/name.png'

const pdfData = ref([
    { id: 1, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230918/8343c6296916f06f440fad513d89a9ca.pdf', name: '1.pdf' },
    { id: 2, pdf: 'http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230616/686e713fa3f0563fbc85a3745f07ab30.pdf', name: '2.pdf' },
    { id: 3, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230914/937fca6e36ff573164d0fef0e8580eea.pdf', name: '3.pdf' },
])

//切换PDF
const pdfItem = ref({})
const pdfIndex = ref(-1)
const pdfDataClick = (item, index) => {
    pdfItem.value = {}
    pdfIndex.value = index
    nextTick(() => {
        pdfItem.value = item
    })
}

//签章数据改变
const pdfChange = (data) => {
    pdfData.value[pdfIndex.value].hcSignImageArr = data
    console.log('签章数据', data)
}
</script>