askbot-dragon 1.4.44 → 1.4.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.4.44",
+  "version": "1.4.46",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/public/index.html

@@ -38,7 +38,7 @@
     <script src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf_viewer.js"  referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf_viewer_01.css" referrerpolicy="no-referrer" />
     <!-- hammer.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
     <style>
       *{
         margin: 0;

package/src/assets/js/hammer.js

@@ -1,72 +1,90 @@
 //定义缩放方法，接收一个element参数：使用export暴露该方法
 export function zoomElement (el) {
+	let store = {
+		scale: 1
+	};
+	// 缩放事件的处理
+	el.addEventListener('touchstart', function (event) {
+		let touches = event.touches;
+		let events = touches[0];
+		let events2 = touches[1];
+		// event.preventDefault();
+		// 第一个触摸点的坐标
+		store.pageX = events.pageX;
+		store.pageY = events.pageY;
 
-	let x = 0;//x轴偏移
-	let y = 0;//y轴偏移
-	let lastScale = 1;//上次缩放值
-	let currentScale = 1;//当前缩放值
-	let center;//双指中心点	
-	//初始化hammer
-	let hammer = new window.Hammer(el);
-	//缩放事件默认是关闭的，需要设置启用
-	hammer.get('pinch').set({ enable: true });	
-	//监听缩放事件
-	hammer.on("pinchmove pinchstart pinchin pinchout", e => {
-		//缩放开始时获取上一次缩放值与双指中心点
-		if (e.type == "pinchstart") {
-			lastScale = currentScale || 1;
-			center = e.center;
-			console.log("centerX:" + center.x)
-			console.log("centerY:" + center.y)
-		}
-		//当前缩放值 = 上一次缩放值 * 缩放比例
-		currentScale = lastScale * e.scale;	
-		//如果缩放值小于1，重置为1
-		if (currentScale < 1) {
-			currentScale = 1;
-		}
-		if(currentScale > 2) {
-			currentScale = 2;
+		store.moveable = true;
+
+		if (events2) {
+			store.pageX2 = events2.pageX;
+			store.pageY2 = events2.pageY;
 		}
-		//偏移量 = 双指中心点 - 当前缩放值 * 双指中心点 = 双指中心点 *（1-当前缩放值）
-		x = center.x * (1 - currentScale)
-		y = center.y * (1 - currentScale)	
-		//设置transform
-		el.style.transform = "translateX(" + (x) + "px)" + "translateY(" + (y) + "px)" + "scale(" + (currentScale) + ")"
+		store.originScale = store.scale || 1;
 	});
-	//监听滑动事件
-	hammer.on('panright panleft panup pandown', (e) => {
-		//滑动时：偏移量 = 滑动距离 + 当前偏移量
-		let translateX = e.deltaX + x
-		let translateY = e.deltaY + y
-		//如果偏移X值大于0：表示视图已经滑到最左侧，重置为0
-		if (translateX > 0) {
-			translateX = 0
+	document.addEventListener('touchmove', function (event) {
+		if (!store.moveable) {
+			return;
 		}
-		//如果偏移Y值大于0：表示视图已经滑到最顶部，重置为0
-		if (translateY > 0) {
-			translateY = 0
-		}
-		//如果偏移X值小于（屏幕宽度-元素宽度）：表示视图已经滑到最左侧，重置为0
-		//屏幕宽度 = el.clientWidth
-		//元素宽度 = el.getBoundingClientRect().width
-		if (translateX < el.clientWidth - el.getBoundingClientRect().width) {
-			translateX = el.clientWidth - el.getBoundingClientRect().width
-		}
-		//如果偏移Y值大于（屏幕高度-元素高度）：表示视图已经滑到最左侧，重置为0
-		//屏幕高度 = el.clientHeight
-		//元素高度 = el.getBoundingClientRect().height
-		if (translateY < el.clientHeight - el.getBoundingClientRect().height) {
-			translateY = el.clientHeight - el.getBoundingClientRect().height
+
+		// event.preventDefault();
+
+		let touches = event.touches;
+		let events = touches[0];
+		let events2 = touches[1];
+		// 双指移动
+		if (events2) {
+			// 第2个指头坐标在touchmove时候获取
+			if (!store.pageX2) {
+				store.pageX2 = events2.pageX;
+			}
+			if (!store.pageY2) {
+				store.pageY2 = events2.pageY;
+			}
+
+			// 获取坐标之间的举例
+			let getDistance = function (start, stop) {
+				return Math.hypot(stop.x - start.x, stop.y - start.y);
+			};
+			// 双指缩放比例计算
+			let zoom = getDistance({
+				x: events.pageX,
+				y: events.pageY
+			}, {
+				x: events2.pageX,
+				y: events2.pageY
+			}) /
+				getDistance({
+					x: store.pageX,
+					y: store.pageY
+				}, {
+					x: store.pageX2,
+					y: store.pageY2
+				});
+			// 应用在元素上的缩放比例
+			let newScale = store.originScale * zoom;
+			// 最大缩放比例限制
+			if (newScale > 3) {
+				newScale = 3;
+			}
+			// 最小缩放比例限制
+			if(newScale < 1) {
+				newScale = 1;
+			}
+			// 记住使用的缩放值
+			store.scale = newScale;
+			// 图像应用缩放效果
+			el.style.transform = 'scale(' + newScale + ')';
 		}
-		//设置transform
-		el.style.transform = "translateX(" + (translateX) + "px)" + "translateY(" + (translateY) + "px)" + "scale(" + (currentScale) + ")"
 	});
-	hammer.on('panend', (e) => {
-		//滑动结束：记录当前偏移量 
-		x = e.deltaX + x;
-		y = e.deltaY + y;
-		console.log("panendx:" + x)
-		console.log("panendy:" + y)
-	})
+	document.addEventListener('touchend', function () {
+		store.moveable = false;
+		delete store.pageX2;
+		delete store.pageY2;
+	});
+	document.addEventListener('touchcancel', function () {
+		store.moveable = false;
+		delete store.pageX2;
+		delete store.pageY2;
+	});
+
 }

package/src/components/previewPdf.vue

@@ -72,6 +72,7 @@
                   border="0"></iframe>
         </template>
         <template v-else>
+          
           <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
         </template>
       </template>
@@ -84,7 +85,7 @@
 
 <script>
 import pdfPosition from './pdfPosition.vue'
-// import { zoomElement } from '../assets/js/hammer'
+import { zoomElement } from '../assets/js/hammer'
 export default {
     data () {
         return {
@@ -99,7 +100,6 @@ export default {
         }
     },
     mounted() {
-      // zoomElement(document.getElementById('drawer_content_pre'))
     },
     props:{
         url:{
@@ -118,6 +118,16 @@ export default {
     components:{
       pdfPosition
     },
+    watch:{
+      drawer(value) {
+        if(value) {
+          this.$nextTick(() =>{
+            this.loading = false 
+            zoomElement(document.getElementById('drawer_content_pre'))
+          })
+        }
+      }
+    },
     computed:{
         previewUrl() {
             console.debug('VUE_APP_ENV',process.env.VUE_APP_ENV)
@@ -260,6 +270,8 @@ export default {
   height: 100%;
 }
 #drawer_content_pre {
+  overflow: auto;
   height: 100%;
+  background: #FFF;
 }
 </style>