预览图

package.json

@@ -18,6 +18,7 @@
 		"qrcodejs2": "^0.0.2",
 		"vconsole": "^3.3.4",
 		"vue": "^2.6.11",
+		"vue-directive-image-previewer": "^2.2.2",
 		"vue-router": "^3.2.0",
 		"vuex": "^3.4.0",
 		"weixin-js-sdk": "^1.6.0"

src/projects/business/main.js

@@ -20,6 +20,26 @@ if (location.hostname === 'localhost') {
 
 Vue.config.productionTip = false
 
+import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
+import 'vue-directive-image-previewer/dist/assets/style.css'
+Vue.use(VueDirectiveImagePreviewer, {
+	background: {
+		color: '#000'
+	},
+	// transition
+	animate: {
+		duration: 600,
+		delay: 500
+	},
+	// loading (not supported)
+	loading: {
+		image: ''
+	},
+	// cursor(css)
+	cursor: 'pointer',
+	clickMethod: 'doubleClick'
+})
+
 
 router.beforeEach((to, from, next) => {
 	if (to.query.test) {
@@ -38,6 +58,7 @@ router.beforeEach((to, from, next) => {
 		next();
 	}
 })
+
 new Vue({
 	router,
 	store,

src/projects/business/views/Master/Attendance/Info.vue

@@ -6,7 +6,7 @@
 		<div class="mui-content vongi-wordcard">
 			<div class="mui-content-padded vongi-wordcard-top">
 				<div class="mui-media-object mui-pull-left">
-					<img :src="detail.faceImageUrl">
+					<img :src="detail.faceImageUrl" v-image-preview>
 				</div>
 				<div class="mui-media-body">
 					{{detail.personName}}
@@ -44,7 +44,7 @@
 					</li>
 					<li class="mui-table-view-cell mui-media fyy-upphoto">
 						<div class="mui-col-xs-3" v-for="(item,index) in picList">
-							<img :src="item" />
+							<img :src="item" v-image-preview />
 						</div>
 					</li>
 				</ul>

yarn.lock

@@ -5081,7 +5081,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597336097104&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=
@@ -8151,6 +8151,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-directive-image-previewer@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npm.taobao.org/vue-directive-image-previewer/download/vue-directive-image-previewer-2.2.2.tgz#56d74e7ab109be9b5fd399a86ff868f2e2ca754a"
+  integrity sha1-VtdOerEJvptf05mob/ho8uLKdUo=
+  dependencies:
+    lodash "^4.17.10"
+    vue "^2.4.2"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -8205,7 +8213,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
-vue@^2.6.11:
+vue@^2.4.2, vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600441238751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=