瀏覽代碼

fix image drag

Michael Wang 3 年之前
父節點
當前提交
6f32ee738d
共有 4 個文件被更改,包括 23 次插入19 次删除
  1. 1 1
      package.json
  2. 1 1
      src/features/ExamList/ExamList.vue
  3. 20 16
      src/features/Image/Image.vue
  4. 1 1
      src/features/ImageDownload/ImageDownload.vue

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "stmmsproxy",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve",

+ 1 - 1
src/features/ExamList/ExamList.vue

@@ -58,7 +58,7 @@ const fetchData = async () => {
 };
 
 const pageChange = (page: number, pageSize: number) => {
-  console.log(page, pageSize);
+  // console.log(page, pageSize);
   currentPage.value = page;
   // fetchData();
   showExams.items = examList.items.slice(

+ 20 - 16
src/features/Image/Image.vue

@@ -315,10 +315,12 @@ let clientX = 0,
 
 const mouseDownHandler = (e: MouseEvent) => {
   // console.log(e);
-  const con = dragContainerRef.value as HTMLDivElement;
-  con.addEventListener("mousemove", mouseMoveThrottle);
-  con.addEventListener("mouseup", mouseUpHandler);
-  con.addEventListener("mouseout", mouseoutHandler);
+  // const con = dragContainerRef.value as HTMLDivElement;
+  // con.addEventListener("mousemove", mouseMoveThrottle);
+  // con.addEventListener("mouseup", mouseUpHandler);
+  document.addEventListener("mousemove", mouseMoveThrottle);
+  document.addEventListener("mouseup", mouseUpHandler);
+  // con.addEventListener("mouseout", mouseoutHandler);
   clientX = e.clientX;
   clientY = e.clientY;
 };
@@ -335,27 +337,29 @@ const mouseMoveHandler = (e: MouseEvent) => {
   if (x.value < 0) {
     x.value = 0;
   }
-  if (x.value > 1) {
-    x.value = 1;
+  if (x.value > 0.95) {
+    x.value = 0.95;
   }
   if (y.value < 0) {
     y.value = 0;
   }
-  if (y.value > 1) {
-    y.value = 1;
+  if (y.value > 0.95) {
+    y.value = 0.95;
   }
 };
-const mouseMoveThrottle = throttle((e: MouseEvent) => mouseMoveHandler(e), 100);
+const mouseMoveThrottle = throttle((e: MouseEvent) => mouseMoveHandler(e), 16);
 
-const mouseoutHandler = () => {
-  mouseUpHandler();
-};
+// const mouseoutHandler = () => {
+//   mouseUpHandler();
+// };
 const mouseUpHandler = () => {
   // console.log(e);
-  const con = dragContainerRef.value as HTMLDivElement;
-  con.removeEventListener("mousemove", mouseMoveThrottle);
-  con.removeEventListener("mouseup", mouseUpHandler);
-  con.removeEventListener("mouseout", mouseoutHandler);
+  // const con = dragContainerRef.value as HTMLDivElement;
+  // con.removeEventListener("mousemove", mouseMoveThrottle);
+  // con.removeEventListener("mouseup", mouseUpHandler);
+  document.removeEventListener("mousemove", mouseMoveThrottle);
+  document.removeEventListener("mouseup", mouseUpHandler);
+  // con.removeEventListener("mouseout", mouseoutHandler);
 };
 </script>
 

+ 1 - 1
src/features/ImageDownload/ImageDownload.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { store } from "@/store";
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { Modal } from "ant-design-vue";
 import { useRouter } from "vue-router";
 const router = useRouter();