添加图片预览
This commit is contained in:
jmal
parent
edf64e4b5f
commit
76dbcfcb72
@ -35,7 +35,9 @@
|
||||
"scriptjs": "^2.5.9",
|
||||
"sortablejs": "^1.10.2",
|
||||
"spark-md5": "^3.0.0",
|
||||
"v-viewer": "^1.5.1",
|
||||
"vant": "^2.5.0",
|
||||
"viewerjs": "^1.5.0",
|
||||
"vonic": "^1.1.3",
|
||||
"vue": "2.6.10",
|
||||
"vue-codemirror-lite": "^1.0.4",
|
||||
|
||||
@ -329,6 +329,7 @@
|
||||
@current-change="currentChange">
|
||||
</el-pagination>
|
||||
<sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
|
||||
<image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imageViewerVisible"></image-viewer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -348,12 +349,13 @@
|
||||
import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
|
||||
import IconFile from "@/components/Icon/IconFile";
|
||||
import EmptyFile from "@/components/EmptyFile";
|
||||
import SimTextPreview from "@/components/SimTextPreview/SimTextPreview";
|
||||
import Clipboard from 'clipboard';
|
||||
import SimTextPreview from "@/components/preview/SimTextPreview";
|
||||
import ImageViewer from "@/components/preview/ImageViewer";
|
||||
|
||||
export default {
|
||||
name: 'ShowFile',
|
||||
components: {SimTextPreview, IconFile, BreadcrumbFilePath,EmptyFile},
|
||||
components: {ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile},
|
||||
props: {
|
||||
emptyStatus: {
|
||||
'type': String,
|
||||
@ -535,6 +537,8 @@
|
||||
generateShareLinkLoading: true,
|
||||
textPreviewVisible : false,
|
||||
textPreviewRow: {},
|
||||
imagePreviewRow: {},
|
||||
imageViewerVisible : false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -1891,7 +1895,14 @@
|
||||
// this.getFileList()
|
||||
}
|
||||
} else {
|
||||
if(row.contentType.indexOf('image') > -1){
|
||||
// 图片
|
||||
this.imageViewerVisible = true
|
||||
this.imagePreviewRow = row
|
||||
return
|
||||
}
|
||||
if(suffix.simText.includes(row.suffix)){
|
||||
// 文本文件
|
||||
this.textPreviewRow = row
|
||||
this.textPreviewVisible = true
|
||||
return
|
||||
|
||||
132
src/components/preview/ImageViewer.vue
Normal file
132
src/components/preview/ImageViewer.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<viewer v-show="false"
|
||||
:options="options"
|
||||
:images="images"
|
||||
@inited="inited"
|
||||
class="viewer" ref="viewer"
|
||||
>
|
||||
<template 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>
|
||||
<!-- {{scope.options}} -->
|
||||
</template>
|
||||
</viewer>
|
||||
<!-- <button type="button" @click="show">Show</button> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'viewerjs/dist/viewer.css';
|
||||
import Bus from '@/assets/js/bus'
|
||||
export default {
|
||||
name: "ImageViewer",
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
status: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
currentSrc: '',
|
||||
images: [],
|
||||
options: {
|
||||
initialViewIndex: 3,
|
||||
ready: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
show: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
shown: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hide: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hidden: function (e) {
|
||||
console.log(e.type);
|
||||
Bus.$emit('updateImageViewerStatus',false)
|
||||
},
|
||||
view: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
viewed: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoom: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoomed: function (e) {
|
||||
console.log(e.type);
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
status: function(visible){
|
||||
if(visible){
|
||||
this.images = []
|
||||
let viewIndex = 0
|
||||
this.fileList.forEach(element => {
|
||||
if(!element.isFolder && element.contentType.indexOf('image') > -1){
|
||||
const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + element.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + 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() {
|
||||
console.log(78)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -25,7 +25,8 @@ import '@/icons' // icon
|
||||
import '@/permission' // permission control
|
||||
|
||||
import VueTouch from"vue-touch";
|
||||
|
||||
import Viewer from 'v-viewer'
|
||||
Vue.use(Viewer)
|
||||
Vue.use(VueTouch, {name:'v-touch'})
|
||||
|
||||
/**
|
||||
|
||||
@ -1,29 +1,78 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="testDialog" title="测试弹框拖拽" dialogDragWidth v-dialogDrag="{ x: transformX, y: transformY }">
|
||||
|
||||
</el-dialog>
|
||||
<div id="app">
|
||||
<viewer v-show="false"
|
||||
:options="options"
|
||||
:images="images"
|
||||
@inited="inited"
|
||||
class="viewer" ref="viewer"
|
||||
>
|
||||
<template scope="scope">
|
||||
<img v-for="src in scope.images" :src="src" :key="src">
|
||||
{{scope.options}}
|
||||
</template>
|
||||
</viewer>
|
||||
<button type="button" @click="show">Show</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import '@/utils/directives.js'
|
||||
// /filepreview/1583564534768屏幕快照 22.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad95
|
||||
// /filepreview/1583563260541image-20200304202759093.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad97
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
export default {
|
||||
name: "testDialog",
|
||||
data(){
|
||||
return{
|
||||
testDialog: true,
|
||||
transformX: (document.body.clientWidth-500)/2,
|
||||
transformY: 200,
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
initialViewIndex: 0,
|
||||
button: true, //右上角关闭按钮
|
||||
navbar: 2,
|
||||
title: 0,
|
||||
toolbar: 0,
|
||||
keyboard: false,
|
||||
ready: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
show: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
shown: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hide: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hidden: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
view: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
viewed: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoom: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoomed: function (e) {
|
||||
console.log(e.type);
|
||||
}
|
||||
},
|
||||
images: ['/filepreview/1583564534768屏幕快照 22.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad95',
|
||||
'/filepreview/1583563260541image-20200304202759093.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad97']
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open:function () {
|
||||
this.testDialog=true
|
||||
methods: {
|
||||
inited (viewer) {
|
||||
this.$viewer = viewer
|
||||
},
|
||||
show (viewIndex) {
|
||||
let index = 0
|
||||
if(viewIndex){
|
||||
index = viewIndex
|
||||
}
|
||||
this.$viewer.index = index
|
||||
console.log(this.$viewer)
|
||||
this.$viewer.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-dialog{
|
||||
margin: 0 !important;
|
||||
/*transform: translate(366px, 140px);*/
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user