<template>
  <!--  <iframe height="650px" width="100%" :src="fileUrl" frameborder="0"></iframe>-->
  <vue-pdf-app style="height: 100vh; width: 100vw" :pdf="fileUrl" :config="pdfPreviewConfig"></vue-pdf-app>
</template>

<script setup lang="jsx">
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";

const pdfPreviewConfig = ref({
  sidebar: false,//左侧目录展示
  secondaryToolbar: false,//二级工具栏
  toolbar: false,//工具栏显示
  errorWrapper: false,
})
const props = defineProps({
  fileUrl: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss">
#vuePdfApp {
  width: auto !important;
  height: 650px !important;
}

#viewerContainer {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }

}
</style>
