vue轮播，展示pdf

vue轮播，展示pdf

根据左侧图片格式，右侧展示相应的pdf文件与图片。（vue中不支持pdf格式，pdf文件要放在static文件里）；代码如下：

 <template>
   <!-- 户图件展示 -->
   <div id="houseImgBox">
     <!-- 左侧img图片 -->
     <div class="leftlList">
       <GeminiScrollbar class="my-scroll-bar">
         <div v-for="(item,index) in leftImgs" class="activedImg">
           <label>{{index+1}}</label>
           <div @click="clickImg(item)" :class="[leftItem == item ? 'listImgActived': 'img']">
             <img v-if="item.fileType =='pdf'" src="pdf.jpg" />
             <img v-else :src="item.fileUrl" />
           </div>
         </div>
       </GeminiScrollbar>
     </div>
     <!-- 分割线 -->
     <div class="string"></div>
     <!-- 中间展示的图片 -->
     <div class="centerImg">
       <img :src="fileUrl" v-show="fileType=='image'" />
       <iframe v-show="fileType=='pdf'" :src="fileUrl" frameborder="0" width="100%" height="100%"></iframe>
     </div>
   </div>
 </template>

 <script>
 export default {
   name: "right",
   components: {},
   beforeCreate: function() {},
   mounted: function() {
     //this.leftImgs = houseImg;
     if (this.leftImgs.length > 0) {
       this.fileUrl = this.leftImgs[0].fileUrl;
       this.fileType = this.leftImgs[0].fileType;
       this.fileName = this.leftImgs[0].fileName;
     }
   },
   data() {
     return {
       fileUrl: "",
       fileType: "image",
       fileName: "",
       leftItem: 0,
       leftImgs: [
         {
           fileUrl:
             "a.jpg",//写你自己的路径信息
           fileName: "房屋分户图",
           fileType: "image"
         },
         {
           fileUrl:
             "a.jpg",//写你自己的路径信息
           fileName: "房屋分户图",
           fileType: "image"
         },
         {
           fileUrl: "test1.pdf",//写你自己的路径信息
           fileName: "ffffff",
           fileType: "pdf"
         },
         {
           fileUrl:
             "b.jpg",//写你自己的路径信息
           fileName: "宗地图",
           fileType: "image"
         },
         {
           fileUrl:
             "c.jpg",//写你自己的路径信息
           fileName: "房屋平面图",
           fileType: "image"
         }
       ]
     };
   },
   methods: {
     clickImg(item) {
       this.leftItem = item;
       this.fileUrl = item.fileUrl;
       this.fileType = item.fileType;
       this.fileName = item.fileName;
     }
   }
 };
 </script>

 <style scoped>
 .leftlList {
   color: white;
   position: absolute;
   margin-top: 40px;
   margin-left: 40px;
   width: 190px;
   height: calc(100% - 80px);
 }

 .leftlList div .img,
 .listImgActived {
   display: inline-block;
   margin: 16px 14px;
   text-align: center;
   vertical-align: middle;
   width: 130px;
   height: 130px;
   line-height: 130px;
   border: 2px solid gray;
 }
 .leftlList div .img > img,.listImgActived img{
   width: 100%;
   height: 100%;
 }

 #app .string {
   position: absolute;
   margin-left: 220px;
   margin-top: 40px;
   height: calc(100% - 80px);
   border: 2px solid gray;
   display: inline-block;
 }

 .centerImg {
   position: absolute;
   width: calc(100% - 430px);
   margin-left: 300px;
   margin-top: 70px;
   text-align: center;
   vertical-align: middle;
   height: calc(100% - 20%);
 }
 .centerImg img {
   width: 100%;
   height: 100%;
 }

 .listImgActived {
   border: 2px solid aqua !important;
 }

 .my-scroll-bar {
   height: 100%;
 }
 </style>

如有疑惑，请加群讨论。