127 lines
2.9 KiB
Vue
127 lines
2.9 KiB
Vue
<!--
|
|
* @Author: 王涛
|
|
* @Mail: no
|
|
* @Date: 2020-10-05 11:36:16
|
|
* @LastEditors: 江涛
|
|
* @LastEditTime: 2021-03-03 17:50:26
|
|
-->
|
|
|
|
<template>
|
|
<div class="img-wrap">
|
|
<div v-if="showChangeBtn" class="changeLeft" @click="changeLeft">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
<div class="showImg">
|
|
<div v-if="showNoImg">暂无</div>
|
|
<el-image v-else :src="currentSrc" :preview-src-list="imgsUrl" lazy>
|
|
<div slot="placeholder" class="image-slot" :style="{ width: width, height: height, lineHeight: height }"><i class="el-icon-loading"></i>加载中</div>
|
|
</el-image>
|
|
</div>
|
|
<div v-if="showChangeBtn" class="changeRight" @click="changeRight">
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
<!--封面图、视频弹窗组件-->
|
|
<Dialog ref="dialog"></Dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Dialog from './components/dialog'
|
|
import { handleVerAutoImg } from '@/utils/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showNoImg: false,
|
|
src: undefined,
|
|
showChangeBtn: false,
|
|
domain: this.$store.getters.getSystemConfig.webImgReq, // 存放图片的域名
|
|
imgsUrl: []
|
|
}
|
|
},
|
|
computed: {
|
|
currentSrc() {
|
|
const src = this.src || this.imgsUrl[0]
|
|
return src
|
|
}
|
|
},
|
|
components: {
|
|
Dialog
|
|
},
|
|
props: ['width', 'height', 'urls'],
|
|
watch: {
|
|
urls: {
|
|
async handler() {
|
|
this.imgsUrl = []
|
|
const urls = []
|
|
if (typeof this.urls === 'string') {
|
|
urls.push(this.urls)
|
|
} else if (Array.isArray(this.urls)) {
|
|
urls.push(...this.urls)
|
|
}
|
|
this.showChangeBtn = urls.length > 1
|
|
this.showNoImg = urls.length < 1
|
|
urls.forEach(async(item, i) => {
|
|
this.imgsUrl.push(await handleVerAutoImg(this.domain + item))
|
|
if (i < 1) this.src = this.imgsUrl[0]
|
|
})
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
changeLeft() {
|
|
const index = this.imgsUrl.indexOf(this.src)
|
|
if (index === 0) {
|
|
this.src = this.imgsUrl[this.imgsUrl.length - 1]
|
|
} else {
|
|
this.src = this.imgsUrl[index - 1]
|
|
}
|
|
},
|
|
changeRight() {
|
|
const index = this.imgsUrl.indexOf(this.src)
|
|
if (index === this.imgsUrl.length - 1) {
|
|
this.src = this.imgsUrl[0]
|
|
} else {
|
|
this.src = this.imgsUrl[index + 1]
|
|
}
|
|
},
|
|
// 查看媒体
|
|
async checkMedia() {
|
|
this.$refs.dialog.open(this.imgsUrl, 'img')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.img-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
.changeLeft,
|
|
.changeRight {
|
|
width: 15px;
|
|
height: 15px;
|
|
line-height: 15px;
|
|
margin-top: 15%;
|
|
cursor: pointer;
|
|
}
|
|
.showImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
.image-slot {
|
|
background: #f5f7fa;
|
|
font-size: 12px;
|
|
color: #c0c4cc;
|
|
}
|
|
.el-image__error {
|
|
font-size: 12px;
|
|
}
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|