FE_occupationlab_client/src/components/pdf/index.vue

<template>
    <div>
        <el-dialog
            custom-class="pdf-dia"
            :close-on-click-modal="false"
            :visible.sync="visible"
            @close="closePdf"
            :fullscreen="true"
            :modal="false"
            :append-to-body="true">
            <div>
                <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i class="el-dialog__close el-icon el-icon-close"></i></button>
                <div class="pdf">
                    <p class="arrow">
                        <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span>
                        {{currentPage}} / {{pageCount}}
                        <span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span>
                    </p>
                    <pdf
                    class="pdf-wrap"
                    :src="src"
                    :page="currentPage"
                    @num-pages="pageCount=$event"
                    @page-loaded="currentPage=$event"
                    @loaded="loadPdfHandler"
                    >
                    </pdf>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
    props: ['visible','src'],
    data() {
        return {
            pdfVisible: false,
            pdfSrc: '',
            currentPage: 0,
            pageCount: 0,
            fileType: 'pdf',
        };
    },
    components: { pdf },
    mounted(){
        this.addEvent()
    },
    methods: {
        closePdf(){
            this.$emit('update:visible',false)
            this.$emit('update:src','')
            this.currentPage = 1
        },
        changePdfPage (val) {
            if (val === 0 && this.currentPage > 1) {
            this.currentPage--
            }
            if (val === 1 && this.currentPage < this.pageCount) {
            this.currentPage++
            }
        },
        loadPdfHandler (e) {
            this.currentPage = 1
        },
        addEvent(){
            document.onkeydown = e => {
                let key = window.event.keyCode
                if(key == 37){
                    this.changePdfPage(0)
                }else if(key == 39){
                    this.changePdfPage(1)
                }
            }
            this.$once('hook:beforeDestroy',() => {
                document.onkeydown = null
            })
        }
    }
};
</script>
<style lang="scss" scoped>
    /deep/.pdf-dia{
        border-radius: 0 !important;
        .el-dialog__header{
            display: none;
        }
        .el-dialog__body{
            padding: 0;
        }
        .el-dialog__headerbtn{
            top: 10px;
            .el-dialog__close{
                color: #fff;
                font-size: 16px;
            }
        }

        .pdf{
            .arrow{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px 0;
                font-size: 16px;
                color: #fff;
                background-color: #333;
                .turn{
                    margin: 0 10px;
                    font-size: 18px;
                    cursor: pointer;
                }
            }
            .pdf-wrap{
                height: calc(100vh - 45px);
                margin: 0 auto;
                overflow: auto;
            }
        }
    }
    
</style>