135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<viewer v-show="false"
|
|
:options="options"
|
|
:images="images"
|
|
@inited="inited"
|
|
class="viewer" ref="viewer"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-for="src in scope.images" :key="src">
|
|
<!-- <video v-if="src.contentType === 'video'" :src="src.url"> -->
|
|
<!-- <video v-if="src.contentType === 'video'" controls="" name="media"><source :src="src.url" type="video/mp4"></video> -->
|
|
<img :src="src">
|
|
</div>
|
|
</template>
|
|
</viewer>
|
|
<!-- <button type="button" @click="show">Show</button> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import fileConfig from '@/utils/file-config'
|
|
import 'viewerjs/dist/viewer.css';
|
|
import Bus from '@/assets/js/bus'
|
|
export default {
|
|
name: "ImageViewer",
|
|
components: {
|
|
},
|
|
props: {
|
|
file: {
|
|
type: Object,
|
|
default: function () {
|
|
return {}
|
|
}
|
|
},
|
|
shareId: {
|
|
type: String,
|
|
default: undefined
|
|
},
|
|
fileList: {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
}
|
|
},
|
|
status: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
data(){
|
|
return{
|
|
currentSrc: '',
|
|
images: [],
|
|
options: {
|
|
initialViewIndex: 3,
|
|
ready: function (e) {
|
|
},
|
|
show: function (e) {
|
|
},
|
|
shown: function (e) {
|
|
},
|
|
hide: function (e) {
|
|
},
|
|
hidden: function (e) {
|
|
Bus.$emit('updateImageViewerStatus',false)
|
|
},
|
|
view: function (e) {
|
|
},
|
|
viewed: function (e) {
|
|
},
|
|
zoom: function (e) {
|
|
},
|
|
zoomed: function (e) {
|
|
}
|
|
},
|
|
}
|
|
},
|
|
watch: {
|
|
status: function(visible){
|
|
if(visible){
|
|
this.images = []
|
|
let viewIndex = 0
|
|
const findIndex = this.fileList.findIndex(file => file.id === this.file.id)
|
|
this.fileList.forEach((element,index) => {
|
|
if(index < findIndex + 5 && index > findIndex - 5 ) {
|
|
if(!element.isFolder && element.contentType.startsWith('image')){
|
|
let url = fileConfig.previewUrl(this.$store.state.user.name, element, this.$store.getters.token)
|
|
if(this.shareId){
|
|
url = fileConfig.publicPreviewUrl(element.id);
|
|
}
|
|
this.images.push(url)
|
|
if(this.file.id === element.id){
|
|
viewIndex = this.images.length-1
|
|
}
|
|
}
|
|
}
|
|
});
|
|
this.show(viewIndex)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
Bus.$on('updateImageViewerStatus', () => {
|
|
this.$emit('update:status', false)
|
|
})
|
|
},
|
|
methods:{
|
|
inited (viewer) {
|
|
this.$viewer = viewer
|
|
},
|
|
show (viewIndex) {
|
|
let index = 0
|
|
if(viewIndex){
|
|
index = viewIndex
|
|
}
|
|
this.$viewer.index = index
|
|
this.$viewer.show()
|
|
},
|
|
updateStatus() {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.viewer-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
</style>
|