同时查看多张图片

src/features/OnlineExam/Examing/UploadPhotos.vue

@@ -1,13 +1,22 @@
 <template>
   <div>
-    <draggable v-model="uploadList" :move="dragMove" @update="uploadListSort">
-      <div class="demo-upload-list" v-for="item in uploadList" :key="item">
+    <draggable
+      v-model="uploadList"
+      :move="dragMove"
+      @update="uploadListSort"
+      class="upload-images"
+    >
+      <div
+        class="demo-upload-list"
+        v-for="(item, index) in uploadList"
+        :key="item"
+      >
         <img :src="item" />
         <div class="demo-upload-list-cover">
           <Icon
             type="ios-eye-outline"
             size="30"
-            @click.native="handleView(item)"
+            @click.native="handleView('.upload-images', index)"
           ></Icon>
           <Icon
             type="ios-trash-outline"
@@ -61,14 +70,23 @@
         </div>
         <div v-else>正在获取二维码...</div>
 
-        <draggable v-model="totalList" @start="drag = true" @end="drag = false">
-          <div class="demo-upload-list" v-for="item in totalList" :key="item">
+        <draggable
+          v-model="totalList"
+          @start="drag = true"
+          @end="drag = false"
+          class="total-images"
+        >
+          <div
+            class="demo-upload-list"
+            v-for="(item, index) in totalList"
+            :key="item"
+          >
             <img :src="item" />
             <div class="demo-upload-list-cover">
               <Icon
                 type="ios-eye-outline"
                 size="30"
-                @click.native="handleView(item)"
+                @click.native="handleView('.total-images', index)"
               ></Icon>
               <Icon
                 type="ios-trash-outline"
@@ -124,8 +142,8 @@ export default {
   },
   methods: {
     ...mapMutations(["updateUploadModalVisible"]),
-    handleView(name) {
-      const viewer = new Viewer(document.querySelector(`img[src="${name}"]`), {
+    handleView(imagesClass, index) {
+      const viewer = new Viewer(document.querySelector(imagesClass), {
         container: "#app",
         zIndex: 99999,
         title: false,
@@ -134,19 +152,21 @@ export default {
           zoomOut: 1,
           oneToOne: 1,
           reset: 1,
-          prev: 0,
+          prev: 1,
           play: {
             show: 0,
             size: "large",
           },
-          next: 0,
+          next: 1,
           rotateLeft: 1,
           rotateRight: 1,
           flipHorizontal: 1,
           flipVertical: 1,
         },
-        viewed() {
+        ready() {
           // viewer.zoomTo(1);
+          viewer.view(index);
+          // console.log("once");
         },
         hidden() {
           viewer.destroy();