Browse Source

键盘多个复制粘贴

ZaiZai 2 năm trước cách đây
mục cha
commit
1397ba34c1

+ 19 - 6
src/components/table-form/index.vue

@@ -266,22 +266,22 @@ const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg) => {
             let state = regx.test(val);
             if (state) {
                 delete formRegExpJson.value[key]
-                dom.style = ''
+                HTableForm.setFormStyle(key, 'hc-red-border')
             } else {
                 formRegExpJson.value[key] = {key, reg, val, msg, state}
-                dom.style = '--el-input-border-color: #fe0000; box-shadow: 0 0 0 2px #fe0000 inset;'
+                HTableForm.setFormStyle(key, 'hc-red-border', true)
                 window?.$message?.warning(msg)
             }
         } else {
             delete formRegExpJson.value[key]
-            dom.style = ''
+            HTableForm.setFormStyle(key, 'hc-red-border')
         }
     } else {
         delete formRegExpJson.value[key]
-        dom.style = ''
     }
 }
 
+
 //鼠标右键事件
 const onRightClick = (pkeyId, event, KeyName) => {
     //取光标位置
@@ -308,7 +308,6 @@ const setShiftTableForm = (key) => {
         }
         checkKeyList.value = keys
         HTableForm.setCheckKeyStyle(key, index !== -1)
-        //console.log(keys)
     }
 }
 
@@ -317,7 +316,6 @@ document.onkeydown = (event) => {
     const {key, ctrlKey} = event
     //按下ctrl键
     if (ctrlKey && key === 'Control') {
-        //console.log('按下ctrl键')
         isCtrlKey.value = true
     }
     //按下复制快捷键
@@ -512,4 +510,19 @@ defineExpose({
         }
     }
 }
+
+.hc-red-border {
+    &.el-textarea__inner, &.el-input .el-input__wrapper {
+        --el-input-border-color: #fe0000;
+        box-shadow: 0 0 0 2px #fe0000 inset;
+    }
+}
+
+.hc-green-border {
+    &.el-textarea__inner, &.el-input .el-input__wrapper {
+        --el-input-border-color: #1ECC95;
+        box-shadow: 0 0 0 2px #1ECC95 inset;
+    }
+}
+
 </style>

+ 20 - 3
src/global/components/hc-context-menu/index.vue

@@ -66,10 +66,14 @@ const setIsSlots = (datas) => {
     menus.value = arr
 }
 
+const isContextmenu = ref(false)
+const isMouseup = ref(false)
+
 //显示菜单
-const showMenu = (event) => {
+const showMenu = (event, contextmenu = true) => {
     let menu = document.getElementById(uuid);
     if (!menu) return;
+    isContextmenu.value = contextmenu
     //取宽高
     menu.style.visibility = 'hidden';
     menu.style.display = 'block';
@@ -89,6 +93,13 @@ const showMenu = (event) => {
         menu.style.top = event.pageY - 2 + 'px';
     }
     menu.classList.add('active');
+    //处理鼠标事件
+    if (!contextmenu && !isMouseup.value) {
+        isMouseup.value = true
+        setTimeout(() => {
+            isMouseup.value = false
+        }, 500)
+    }
 }
 
 //事件
@@ -102,8 +113,14 @@ const hideContextMenu = () => {
     }
 }
 
-const onClickOutside = () => {
-    hideContextMenu()
+const onClickOutside = (event) => {
+    if (isContextmenu.value) {
+        hideContextMenu()
+    } else {
+        if (!isMouseup.value) {
+            hideContextMenu()
+        }
+    }
 }
 
 //菜单被点击

+ 29 - 15
src/plugins/HTableForm.js

@@ -57,7 +57,7 @@ export default class HTableForm {
             },
             methods: {
                 //鼠标右键菜单
-                contextmenuClick(event) {
+                contextmenuClick(a, b, c, d, e, f, event) {
                     event.preventDefault();
                 },
                 //鼠标右键事件
@@ -262,22 +262,36 @@ export default class HTableForm {
         }
     }
 
+    //设置表单样式
+    static setFormStyle(key, name = 'hc-red-border', add = false) {
+        const dom = document.getElementById(key)
+        let parent = dom?.parentElement ?? ''
+        if (dom.tagName === 'INPUT') {
+            parent = parent?.parentElement ?? ''
+            this.setFormClass(parent, name, add)
+        } else if (dom.tagName === 'TEXTAREA') {
+            this.setFormClass(dom, name, add)
+        }
+    }
+
+    static setFormClass(dom, name = 'hc-red-border', add = false) {
+        const classStr = dom.getAttribute('class')
+        const classArr = classStr.split(' ')
+        const index = classArr.indexOf(name)
+        if (index === -1 && add) {
+            classArr.push(name)
+        } else if (index !== -1 && false) {
+            classArr.splice(index, 1)
+        }
+        dom.setAttribute('class', classArr.join(' '))
+    }
+
     //设置选中样式
     static setCheckKeyStyle(key, remove = false) {
-        const dom = document.getElementById(key);
-        const parent = dom?.parentElement ?? ''
-        if (parent && !remove) {
-            if (dom.tagName === 'INPUT') {
-                parent.style = '--el-input-border-color: #1ECC95; box-shadow: 0 0 0 2px #1ECC95 inset;'
-            } else if (dom.tagName === 'TEXTAREA') {
-                dom.style = '--el-input-border-color: #1ECC95; box-shadow: 0 0 0 2px #1ECC95 inset;'
-            }
-        } else if (parent && remove) {
-            if (dom.tagName === 'INPUT') {
-                parent.style = ''
-            } else if (dom.tagName === 'TEXTAREA') {
-                dom.style = ''
-            }
+        if (remove) {
+            this.setFormStyle(key, 'hc-green-border')
+        } else {
+            this.setFormStyle(key, 'hc-green-border', true)
         }
     }
 

+ 1 - 1
src/views/data-fill/collapse-form/index.vue

@@ -494,7 +494,7 @@ const setTableFormMenu = (info) => {
 const tableFormRightTap = ({event, KeyName, startPos, endPos, pkeyId}, index) => {
     //存储临时信息
     tableFormItemNode.value = {KeyName, index, startPos, endPos, pkeyId}
-    contextMenuRef.value?.showMenu(event) //展开菜单
+    contextMenuRef.value?.showMenu(event, false) //展开菜单
 }
 
 //鼠标右键菜单被点击