client-app/components/hc-pdf/index.vue

<template>
    <web-view :webview-styles="webStyle" :style="webStyle" :src="pdfSrc" v-if="pdfSrc"/>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";

//初始变量
const props = defineProps({
    ui: {
        type: Object,
        default: () => ({})
    },
    src: String,
});

const windowInfo = uni.getWindowInfo()
const pdfSrc = ref('')
const webStyle = ref({})

//渲染完成
onMounted(() => {
    setPdfSrc(props.src)
    setWebStyle(props.ui)
})

//监听变化
watch(() => [
    props.src
], ([src]) => {
    setPdfSrc(src)
})

//监听样式变化
watch(() => [
    props.ui
], ([ui]) => {
    setWebStyle(ui)
}, {deep: true})

//设置pdf的url
const setPdfSrc = (src) => {
    const url = '/hybrid/html/pdf/index.html?src='
    if (src) {
        pdfSrc.value = url + src
    } else {
        pdfSrc.value = ''
    }
}

//设置webview的样式
const setWebStyle = (data) => {
    const {windowHeight} = windowInfo
    webStyle.value = {
        ...data,
        height: data.height ?? windowHeight + 'px'
    }
}
</script>