inl-ui 0.1.40 → 0.1.41

package/dist/components/index.cjs

@@ -9302,7 +9302,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -9310,6 +9312,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -9317,15 +9322,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -9335,7 +9348,6 @@ const VideoBoxV2 = vue.defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -9345,17 +9357,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -9430,7 +9449,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/components/index.js

@@ -9291,7 +9291,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -9299,6 +9301,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -9306,15 +9311,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -9324,7 +9337,6 @@ const VideoBoxV2 = defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -9334,17 +9346,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -9419,7 +9438,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/index.cjs

@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var EZUIKit__default = /*#__PURE__*/_interopDefaultLegacy(EZUIKit);
 
-var version = "0.1.39";
+var version = "0.1.40";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10306,7 +10306,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -10314,6 +10316,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -10321,15 +10326,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -10339,7 +10352,6 @@ const VideoBoxV2 = vue.defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -10349,17 +10361,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -10434,7 +10453,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
 
-var version = "0.1.39";
+var version = "0.1.40";
 
 declare const _default$p: {
     set(theme: string): void;

package/dist/index.js

@@ -14,7 +14,7 @@ import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
 import { marked } from 'marked';
 import '@sszj-temp/mobile/style.css';
 
-var version = "0.1.39";
+var version = "0.1.40";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10275,7 +10275,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -10283,6 +10285,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -10290,15 +10295,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -10308,7 +10321,6 @@ const VideoBoxV2 = defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -10318,17 +10330,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -10403,7 +10422,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/video/index.cjs

@@ -6493,7 +6493,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -6501,6 +6503,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -6508,15 +6513,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -6526,7 +6539,6 @@ const VideoBoxV2 = vue.defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -6536,17 +6548,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -6621,7 +6640,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/video/index.js

@@ -6484,7 +6484,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
       newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
       newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
@@ -6492,6 +6494,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -6499,15 +6504,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       playerDom?.removeEventListener("mousemove", mousemoveFun);
       newDiv.remove();
-      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
-      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
-      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
-      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -6517,7 +6530,6 @@ const VideoBoxV2 = defineComponent({
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
       chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
-      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
       chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
       chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
     };
@@ -6527,17 +6539,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -6612,7 +6631,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",