<template>
    <div id="container">
        <div class="title">
            <div>PDF阅读器</div>
            <div>{
   {
   currentPage}}/{
   {
   pageCount}}</div>
            <div>
                <!-- 上一页、下一页 -->
                <div class="right-btn">
                    <!-- 输入页码 -->
                    <!-- <div class="pageNum">
                    <input v-model.number="currentPage"
                            type="number"
                            class="inputNumber"
                            @input="inputEvent()"> / {
   {
   pageCount}}
                    </div> -->
                    <div @click="changePdfPage('first')"
                        class="turn">
                    首页
                    </div>
                    <!-- 在按钮不符合条件时禁用 -->
                    <div @click="changePdfPage('pre')"
                        class="turn-btn"
                        :style="currentPage===1?'cursor: not-allowed;color:#999;':''">
                    上一页
                    </div>
                    <div @click="changePdfPage('next')"
                        class="turn-btn"
                        :style="currentPage===pageCount?'cursor: not-allowed;color:#999;':''">
                    下一页
                    </div>
                    <div @click="changePdfPage('last')"
                        class="turn">
                    尾页
                    </div>
                </div>
            </div>
        </div>
      <div class="pdfArea">
        <pdf :src="src"
             ref="pdf"
             v-show="loadedRatio===1"
             :page="currentPage"
             @num-pages="pageCount=$event"
             @progress="loadedRatio = $event"
             @page-loaded="currentPage=$event"
             @loaded="loadPdfHandler"
             @link-clicked="currentPage = $event"
             style="display: inline-block;width:100%"
             id="pdfID"><