添加图片预览

package.json

@@ -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",

src/components/ShowFile/ShowFile.vue

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

src/components/preview/ImageViewer.vue

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

src/main.js

@@ -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'})
 
 /**

src/views/demo/index.vue

@@ -1,29 +1,78 @@
 <template>
-  <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" dialogDragWidth v-dialogDrag="{ x: transformX, y: transformY }">
+  <div id="app">
-
+    <viewer v-show="false" 
-  </el-dialog>
+            :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() {
-    data(){
+      return {
-      return{
+        options: {
-        testDialog: true,
+          initialViewIndex: 0,
-        transformX: (document.body.clientWidth-500)/2,
+          button: true, //右上角关闭按钮
-        transformY: 200,
+          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:{
+    methods: {
-      open:function () {
+      inited (viewer) {
-        this.testDialog=true
+        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>