|
@@ -1,8 +1,9 @@
|
|
<template>
|
|
<template>
|
|
<div class="document-viewer">
|
|
<div class="document-viewer">
|
|
<div class="mask"></div>
|
|
<div class="mask"></div>
|
|
- <div ref="containerRef" class="container" :style="{ width: props.width + 'px' }">
|
|
|
|
- <div class="top" ref="topRef">
|
|
|
|
|
|
+ <div ref="containerRef" class="container"
|
|
|
|
+ :style="{ width: props.width + 'px', paddingTop: containerSize.offset + 'px' }">
|
|
|
|
+ <div class="top" ref="topRef" :style="{ width: props.width + 'px' }">
|
|
<span v-show="props.fileName" class="file-name">{{ props.fileName }}</span>
|
|
<span v-show="props.fileName" class="file-name">{{ props.fileName }}</span>
|
|
<span class="close">
|
|
<span class="close">
|
|
<el-icon @click="emit('closeViewer')">
|
|
<el-icon @click="emit('closeViewer')">
|
|
@@ -46,6 +47,7 @@ const emit = defineEmits(['closeViewer'])
|
|
const topRef = ref()
|
|
const topRef = ref()
|
|
const containerRef = ref() //.containerd的ref
|
|
const containerRef = ref() //.containerd的ref
|
|
let containerSize = ref({
|
|
let containerSize = ref({
|
|
|
|
+ offset: 0,
|
|
width: 0,
|
|
width: 0,
|
|
height: 0,
|
|
height: 0,
|
|
})
|
|
})
|
|
@@ -75,6 +77,7 @@ function errorHandler() {
|
|
const handleResize = () => {
|
|
const handleResize = () => {
|
|
console.log(containerRef.value.offsetHeight, topRef.value.offsetHeight)
|
|
console.log(containerRef.value.offsetHeight, topRef.value.offsetHeight)
|
|
containerSize.value = {
|
|
containerSize.value = {
|
|
|
|
+ offset: topRef.value.offsetHeight,
|
|
width: containerRef.value.offsetWidth,
|
|
width: containerRef.value.offsetWidth,
|
|
height: containerRef.value.offsetHeight - topRef.value.offsetHeight - 3
|
|
height: containerRef.value.offsetHeight - topRef.value.offsetHeight - 3
|
|
}
|
|
}
|
|
@@ -171,7 +174,8 @@ onBeforeUnmount(() => {
|
|
background-color: white;
|
|
background-color: white;
|
|
clear: both;
|
|
clear: both;
|
|
padding: 5px 10px;
|
|
padding: 5px 10px;
|
|
- position: sticky;
|
|
|
|
|
|
+ position: fixed;
|
|
|
|
+ // width: 100%;
|
|
z-index: 65;
|
|
z-index: 65;
|
|
top: 0px;
|
|
top: 0px;
|
|
// bottom: -1000000000px;
|
|
// bottom: -1000000000px;
|