支持配置鼠标插件的跟随元素的z-index值

wanglin2 · Mar 24, 2023 · 1638e41 · 1638e41
1 parent 1d9f1cf
commit 1638e41
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -28,11 +28,13 @@ import Markjs from '@wanglin1994/markjs'
 
 ```bash
 cd markjs
+npm i
 npm link
 ```
 
 ```bash
 cd markjs-docs
+npm i 
 npm link @wanglin1994/markjs
 npm run serve
 ```
@@ -944,6 +946,7 @@ Markjs.use(mousePlugin)
 | cursorTips | 提示信息，对象，格式见表5-1 | Object | —      |  |
 | showPen | 否显示鼠标指针画笔 | Boolean | —      | true |
 | penImg | 自定义鼠标指针图片地址 | String | —      |  |
+| zIndex | v1.0.23+，鼠标跟随的元素的z-index值 | Number | —      | 999 |
 
 ##### 表5-1 提示信息cursorTips对象格式
 

diff --git a/markjs-docs/src/components/Demo1.vue b/markjs-docs/src/components/Demo1.vue
@@ -79,6 +79,7 @@ export default {
         },
         fillColor: "rgba(0,136,255,0.30)",
         dbClickRemovePoint: true,
+        zIndex: 9999
       });
       mark0.on("CURRENT-MARK-ITEM-CHANGE", (item) => {
         this.curEditMarkItem0 = item;

diff --git a/markjs/package.json b/markjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wanglin1994/markjs",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "一个插件化的多边形标注库",
   "main": "index.js",
   "scripts": {

diff --git a/markjs/src/plugins/mouse.js b/markjs/src/plugins/mouse.js
@@ -8,7 +8,8 @@
         EDITING_POINT: '拖拽移动节点，修改区域边界，双击删除节点'
     },
     showPen: true,// 是否显示笔
-    penImg: ''// 鼠标指针图片
+    penImg: '',// 鼠标指针图片
+    zIndex: 999
 }
 
 属性
@@ -27,7 +28,8 @@ const defaultOpt = {
         EDITING: '拖曳移动节点或区域，双击结束操作',
         HOVER: '单击激活该区域并进入编辑状态',
         EDITING_POINT: '拖拽移动节点，修改区域边界，双击删除节点'
-    }
+    },
+    zIndex: 999
 }
 
 /** 
@@ -71,7 +73,7 @@ export default function mousePlugin(instance){
             padding: 0 10px;
             user-select: none;
             display: none;
-            z-index: 3;
+            z-index: ${opt.zIndex};
         `
         document.body.appendChild(cursorTipEle)
     }