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;
   190px;
  height: calc(100% - 80px);
}

.leftlList div .img,
.listImgActived {
  display: inline-block;
  margin: 16px 14px;
  text-align: center;
  vertical-align: middle;
   130px;
  height: 130px;
  line-height: 130px;
  border: 2px solid gray;
}
.leftlList div .img > img,.listImgActived img{
   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;
   calc(100% - 430px);
  margin-left: 300px;
  margin-top: 70px;
  text-align: center;
  vertical-align: middle;
  height: calc(100% - 20%);
}
.centerImg img {
   100%;
  height: 100%;
}

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

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

如有疑惑，请加群讨论。