Przeglądaj źródła

上下左右快捷键

ZaiZai 2 lat temu
rodzic
commit
dcfbc70332
2 zmienionych plików z 43 dodań i 2 usunięć
  1. 17 1
      src/plugins/HTableForm.js
  2. 26 1
      src/test/index.vue

+ 17 - 1
src/plugins/HTableForm.js

@@ -86,7 +86,23 @@ export default class HTableForm {
                 //多选框处理
                 checkboxGroupChange({key, val}) {
                     this.formData[key] = val
-                }
+                },
+                //键盘事件 上键
+                keyupShiftUp(event) {
+
+                },
+                //键盘事件 下键
+                keyupShiftDown(event) {
+
+                },
+                //键盘事件 左键
+                keyupShiftLeft(event) {
+
+                },
+                //键盘事件 右键
+                keyupShiftRight(event) {
+
+                },
             }
         })
         app.mount(appId)

+ 26 - 1
src/test/index.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="hc-page-box">
         <HcCard title="测试">
-            123456
+            <el-button type="primary" @click="hideClick">设置焦点</el-button>
+            <el-input type="text" id="xxxxx" @keyup.shift.up="keyupShiftUp" @keyup.shift.down="keyupShiftDown" @keyup.shift.left="keyupShiftLeft" @keyup.shift.right="keyupShiftRight"/>
         </HcCard>
     </div>
 </template>
@@ -13,4 +14,28 @@ import {ref, onMounted, nextTick} from "vue";
 onMounted(()=> {
 
 })
+
+const hideClick = () => {
+    document.getElementById('xxxxx').focus();
+}
+
+//上
+const keyupShiftUp = (event) => {
+  console.log(event)
+}
+
+//下
+const keyupShiftDown = (event) => {
+    console.log(event)
+}
+
+//左
+const keyupShiftLeft = (event) => {
+    console.log(event)
+}
+
+//右
+const keyupShiftRight = (event) => {
+    console.log(event)
+}
 </script>