添加图片放大功能

package-lock.json

@@ -8223,6 +8223,22 @@
       "dev": true,
       "optional": true
     },
+    "v-viewer": {
+      "version": "1.5.1",
+      "resolved": "http://192.168.110.93:4873/v-viewer/-/v-viewer-1.5.1.tgz",
+      "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.3.0",
+          "resolved": "http://192.168.110.93:4873/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+          "integrity": "sha1-/TGGXmZQIHHkEYF+JBRls+nDcuI="
+        }
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
@@ -8257,6 +8273,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.9.0",
+      "resolved": "http://192.168.110.93:4873/viewerjs/-/viewerjs-1.9.0.tgz",
+      "integrity": "sha1-bfr1REDDsvdpG4Vma6bSdwjtlZI="
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",

package.json

@@ -24,7 +24,9 @@
         "vue-table-with-tree-grid": "^0.2.4",
         "vue-xlsx-table": "^1.2.8",
         "vuedraggable": "^2.16.0",
-        "vuex": "^3.0.1"
+        "vuex": "^3.0.1",
+        "v-viewer": "^1.2.1",
+        "viewerjs": "^1.3.0"
     },
     "devDependencies": {
         "autoprefixer": "^6.7.2",

src/main.js

@@ -10,12 +10,16 @@ import 'element-ui/lib/theme-chalk/index.css';    // 默认主题
 import {getAddress, loadCommonFilter} from './common/env'
 import vueFilter from './common/filter';
 
+import vViewer from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
+
 
 //加载环境变量
 getAddress();
 loadCommonFilter();
 //加载elementUi
 Vue.use(ElementUI);
+Vue.use(vViewer);
 Vue.prototype.$echarts = echarts;
 // Vue.use(vueXlsxTable, {rABS: false})
 

src/views/order-list/order-detail.vue

@@ -35,7 +35,9 @@
         <div class="order">
             <p>处方信息</p>
             <div class="">暂无处方信息/处方图片：</div>
-            <div class="order-img" v-for="(item, index) in detailData.recipeUrlList" :key="index"><img :src="item"/></div>
+            <div class="order-img" v-viewer="{movable: false}">
+                <img v-for="(item, index) in detailData.recipeUrlList" :key="index" :src="item"/>
+            </div>
         </div>
         <div class="order">
             <p>收货人信息</p>