vue轮播，展示pdf

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

vue轮播，展示pdf

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

<template>

<div id="houseImgBox">

<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>