关于天云页面-荣誉资质展示增加点击查看大图功能

package.json

@@ -17,6 +17,7 @@
     "element-ui": "^2.15.14",
     "jquery": "1.11",
     "swiper": "5.4.5",
+    "v-viewer": "1.6.4",
     "vue": "^2.6.14",
     "vue-router": "3.6.2",
     "vuex": "3.2"

src/main.js

@@ -1,28 +1,43 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import ElementUI from 'element-ui'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementUI from "element-ui";
 // import 'animate.css'
 // import '@/assets/common.css'
 // import '@/assets/common-cn.css'
 // import '@/assets/home.css'
 // import '@/assets/index.css'
 // import '@/plug/bootstrap-3.2.0-dist/css/bootstrap.min.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '@/assets/plug/Font-Awesome-4.7.0/css/font-awesome.min.css'
-import '@/assets/css/main.css'
-import $ from 'jquery'
-import 'bootstrap/dist/js/bootstrap.min.js'
-import '@/assets/js/main'
-import 'element-ui/lib/theme-chalk/index.css'
+import "bootstrap/dist/css/bootstrap.min.css";
+import "@/assets/plug/Font-Awesome-4.7.0/css/font-awesome.min.css";
+import "@/assets/css/main.css";
+import $ from "jquery";
+import "bootstrap/dist/js/bootstrap.min.js";
+import "@/assets/js/main";
+import "element-ui/lib/theme-chalk/index.css";
+import Viewer from "v-viewer";
+import "viewerjs/dist/viewer.css";
 
-Vue.use(ElementUI)
+Vue.use(Viewer, {
+  defaultOptions: {
+    button: false,
+    toolbar: false,
+    fullscreen: false,
+    navbar: false,
+    movable: false,
+    zoomable: false,
+    rotatable: false,
+    title: false
+  }
+});
 
-Vue.config.productionTip = false
+Vue.use(ElementUI);
+
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App),
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

src/views/Profuile/index.vue

@@ -64,7 +64,7 @@
     <div class="pr_rongyv">
         <div class="container">
             <h2>荣誉资质</h2>
-            <div class="row">
+            <div class="row" v-viewer>
                 <div class="col-md-3">
                     <h3>2017年12月1日</h3>
                     <img src="@/assets/img/zhengshu/fenli.jpg" alt="">
@@ -120,18 +120,17 @@
                     <p>
                         荣获2017年度广东省“重合同守信用明星企业”殊荣
                     </p>
-                </div>
-                
-                
-                
-                
-                
+                </div>   
             </div>
         </div>
     </div>
   </div>
 </template>
 
+<script>
+    // Vue.directive('viewer', viewerDirective({debug: true}));
+</script>
+
 <style scoped>
 .indent-p {
     text-indent: 2ch;
@@ -144,6 +143,7 @@
 .pr_rongyv img {
     width: 100%;
     height: 200px;
+    cursor: pointer;
 }
 .pr_rongyv p {
     margin-top: 10px;

yarn.lock

@@ -5810,6 +5810,11 @@ throttle-debounce@^1.0.1:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
   integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
 
+throttle-debounce@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -5950,6 +5955,14 @@ uuid@^8.3.2:
   resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+v-viewer@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz#39e36b534baab34076fb816704c6a734de0dc72f"
+  integrity sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==
+  dependencies:
+    throttle-debounce "^2.0.1"
+    viewerjs "^1.5.0"
+
 v8-compile-cache@^2.0.3:
   version "2.4.0"
   resolved "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
@@ -5968,6 +5981,11 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+viewerjs@^1.5.0:
+  version "1.11.6"
+  resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.6.tgz#19a1e78c15eba5a9fbbf34ebc5ab312d6e8932ed"
+  integrity sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"