feat(element): 支持使用键盘快捷键删除元素; !#en: support delete element with keyboard

ly525
1 parent 51ea07af
Showing 3 changed files with 28 additions and 3 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/support/excel.js
front-end/h5/src/components/core/support/shape.js
@@ -235,6 +235,7 @@ export default {
               }
               return (
                 <Shape
+                  onDelete={() => this.elementManager({ type: 'delete' }) }
                   style={element.getStyle({ position: 'absolute' })}
                   defaultPosition={element.commonStyle} // {top, left}
                   element={element}
@@ -35,7 +35,7 @@ export default {
     }
   },
   watch: {
-    value() {
+    value () {
       this.refreshSheet({ rows: this.innerItems })
     }
   },
@@ -53,7 +53,7 @@ export default {
       this.sheet.loadData(data)
       this.sheet.reRender()
     },
-    initSheet() {
+    initSheet () {
       const ele = this.$refs.excel
       return this.sheet || new Spreadsheet(ele, {
         showToolbar: false,
@@ -86,5 +86,5 @@ export default {
   mounted () {
     this.sheet = this.initSheet()
     this.refreshSheet({ rows: this.innerItems })
-  },
+  }
 }
@@ -141,11 +141,35 @@ export default {
         this.handleMousedownProp()
         this.mousedownForElement(e, this.element)
       }
+    },
+    /**
+     * !#en: delete element with keyboard
+     * !#zh: 键盘快捷键删除元素
+     *
+     * TODO: 增加 确认删除 拦截操作
+     */
+    handleDeleteByKeyboard (e) {
+      const key = event.keyCode || event.charCode
+      if (key === 8 || key === 46) {
+        this.$emit('delete')
+      }
+    },
+    /**
+     * detect key pressed on keyboard
+     * 检测键盘按键 按下行为
+     *
+     * 支持如下行为：
+     * - Backspace/Delete 快速删除元素
+     */
+    handleKeyPressed (e) {
+      this.handleDeleteByKeyboard(e)
     }
   },
   render (h) {
     return (
       <div
+        tabIndex="0"
+        onKeydown={this.handleKeyPressed}
         onClick={this.handleWrapperClick}
         onMousedown={this.handleMousedown}
         class={{ 'shape__wrapper-active': this.active }}