浏览代码

fix(webapp): replace deprecated keycode modifier

* Add filter rule to prevent future ones
* Preparation for vue3 migration

Reference:
https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html
https://eslint.vuejs.org/rules/no-deprecated-v-on-number-modifiers.html
Rotzbua 2 年之前
父节点
当前提交
fb696959f5
共有 2 个文件被更改,包括 27 次插入7 次删除
  1. 1 0
      www/webapp/.eslintrc.js
  2. 26 7
      www/webapp/src/components/Field/RecordItem.vue

+ 1 - 0
www/webapp/.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
     'vue/mustache-interpolation-spacing': ['warn', 'always'],
     'vue/no-multi-spaces': 'warn',
     'vue/no-deprecated-filter': 'warn', // Preparation for vue3
+    'vue/no-deprecated-v-on-number-modifiers': 'warn', // Preparation for vue3
   },
   ignorePatterns: ['**/src/modules/**/*'],
   parserOptions: {

+ 26 - 7
www/webapp/src/components/Field/RecordItem.vue

@@ -21,13 +21,7 @@
         @click:append="$emit('remove', $event)"
         @input="inputHandler()"
         @paste.prevent="pasteHandler($event)"
-        @keydown.8="backspaceHandler(index, $event)"
-        @keydown.32="spaceHandler(index, $event)"
-        @keydown.35="endHandler($event)"
-        @keydown.36="homeHandler($event)"
-        @keydown.37="leftHandler(index, $event)"
-        @keydown.39="rightHandler(index, $event)"
-        @keydown.46="deleteHandler(index, $event)"
+        @keydown="keydownHandler(index, $event)"
         @keyup="(e) => $emit('keyup', e)"
       />
       <span
@@ -208,6 +202,31 @@ export default {
       return index < this.fields.length - 1
         && this.$refs.input[index].$refs.input.selectionStart === this.fields[index].value.length;
     },
+    keydownHandler(index, event) {
+      switch (event.keyCode) {
+        case 8:
+          this.backspaceHandler(index, event);
+          break;
+        case 32:
+          this.spaceHandler(index, event);
+          break;
+        case 35:
+          this.endHandler(event);
+          break;
+        case 36:
+          this.homeHandler(event);
+          break;
+        case 37:
+          this.leftHandler(index, event);
+          break;
+        case 39:
+          this.rightHandler(index, event);
+          break;
+        case 46:
+          this.deleteHandler(index, event);
+          break;
+      }
+    },
     spaceHandler(index, event) {
       if (!this.positionBeforeDelimiter(index)) {
         return;