vue轮播，展示pdf

vue轮播，展示pdf

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

  1 <template>
  2   <!-- 户图件展示 -->
  3   <div id="houseImgBox">
  4     <!-- 左侧img图片 -->
  5     <div class="leftlList">
  6       <GeminiScrollbar class="my-scroll-bar">
  7         <div v-for="(item,index) in leftImgs" class="activedImg">
  8           <label>{{index+1}}</label>
  9           <div @click="clickImg(item)" :class="[leftItem == item ? 'listImgActived': 'img']">
 10             <img v-if="item.fileType =='pdf'" src="pdf.jpg" />
 11             <img v-else :src="item.fileUrl" />
 12           </div>
 13         </div>
 14       </GeminiScrollbar>
 15     </div>
 16     <!-- 分割线 -->
 17     <div class="string"></div>
 18     <!-- 中间展示的图片 -->
 19     <div class="centerImg">
 20       <img :src="fileUrl" v-show="fileType=='image'" />
 21       <iframe v-show="fileType=='pdf'" :src="fileUrl" frameborder="0" width="100%" height="100%"></iframe>
 22     </div>
 23   </div>
 24 </template>
 25 
 26 <script>
 27 export default {
 28   name: "right",
 29   components: {},
 30   beforeCreate: function() {},
 31   mounted: function() {
 32     //this.leftImgs = houseImg;
 33     if (this.leftImgs.length > 0) {
 34       this.fileUrl = this.leftImgs[0].fileUrl;
 35       this.fileType = this.leftImgs[0].fileType;
 36       this.fileName = this.leftImgs[0].fileName;
 37     }
 38   },
 39   data() {
 40     return {
 41       fileUrl: "",
 42       fileType: "image",
 43       fileName: "",
 44       leftItem: 0,
 45       leftImgs: [
 46         {
 47           fileUrl:
 48             "a.jpg",//写你自己的路径信息
 49           fileName: "房屋分户图",
 50           fileType: "image"
 51         },
 52         {
 53           fileUrl:
 54             "a.jpg",//写你自己的路径信息
 55           fileName: "房屋分户图",
 56           fileType: "image"
 57         },
 58         {
 59           fileUrl: "test1.pdf",//写你自己的路径信息
 60           fileName: "ffffff",
 61           fileType: "pdf"
 62         },
 63         {
 64           fileUrl:
 65             "b.jpg",//写你自己的路径信息
 66           fileName: "宗地图",
 67           fileType: "image"
 68         },
 69         {
 70           fileUrl:
 71             "c.jpg",//写你自己的路径信息
 72           fileName: "房屋平面图",
 73           fileType: "image"
 74         }
 75       ]
 76     };
 77   },
 78   methods: {
 79     clickImg(item) {
 80       this.leftItem = item;
 81       this.fileUrl = item.fileUrl;
 82       this.fileType = item.fileType;
 83       this.fileName = item.fileName;
 84     }
 85   }
 86 };
 87 </script>
 88 
 89 <style scoped>
 90 .leftlList {
 91   color: white;
 92   position: absolute;
 93   margin-top: 40px;
 94   margin-left: 40px;
 95   width: 190px;
 96   height: calc(100% - 80px);
 97 }
 98 
 99 .leftlList div .img,
100 .listImgActived {
101   display: inline-block;
102   margin: 16px 14px;
103   text-align: center;
104   vertical-align: middle;
105   width: 130px;
106   height: 130px;
107   line-height: 130px;
108   border: 2px solid gray;
109 }
110 .leftlList div .img > img,.listImgActived img{
111   width: 100%;
112   height: 100%;
113 }
114 
115 #app .string {
116   position: absolute;
117   margin-left: 220px;
118   margin-top: 40px;
119   height: calc(100% - 80px);
120   border: 2px solid gray;
121   display: inline-block;
122 }
123 
124 .centerImg {
125   position: absolute;
126   width: calc(100% - 430px);
127   margin-left: 300px;
128   margin-top: 70px;
129   text-align: center;
130   vertical-align: middle;
131   height: calc(100% - 20%);
132 }
133 .centerImg img {
134   width: 100%;
135   height: 100%;
136 }
137 
138 .listImgActived {
139   border: 2px solid aqua !important;
140 }
141 
142 .my-scroll-bar {
143   height: 100%;
144 }
145 </style>

如有疑惑，请加群讨论。

 

posted @ 2019-09-25 19:20  web与webGL  阅读(724)  评论(0)  编辑  收藏  举报