From aa5a3838744e442a1e9253b984e6944652e71e5f Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Thu, 22 Oct 2020 17:42:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(h5):=20=E5=86=85=E7=BD=AE=20popup=20?=
 =?UTF-8?q?=E7=B1=BB=E7=BB=84=E4=BB=B6=E5=93=8D=E5=BA=94=20esc=E3=80=81ent?=
 =?UTF-8?q?er=20=E6=8C=89=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h5/components/app/popup/actionSheet.vue   |  6 +++
 .../h5/components/app/popup/modal.vue         |  8 ++++
 src/platforms/h5/helpers/keypress.js          | 40 +++++++++++++++++++
 .../h5/view/components/picker/index.vue       |  7 ++++
 4 files changed, 61 insertions(+)
 create mode 100644 src/platforms/h5/helpers/keypress.js

diff --git a/src/platforms/h5/components/app/popup/actionSheet.vue b/src/platforms/h5/components/app/popup/actionSheet.vue
index d60cdaf2b..e95863969 100644
--- a/src/platforms/h5/components/app/popup/actionSheet.vue
+++ b/src/platforms/h5/components/app/popup/actionSheet.vue
@@ -40,13 +40,19 @@
       </div>
       <div :style="popupStyle.triangle" />
     </div>
+    <keypress
+      :disable="!visible"
+      @esc="_close(-1)"
+    />
   </uni-actionsheet>
 </template>
 <script>
 import popup from './mixins/popup'
+import keypress from '../../../helpers/keypress'
 
 export default {
   name: 'ActionSheet',
+  components: { keypress },
   mixins: [popup],
   props: {
     title: {
diff --git a/src/platforms/h5/components/app/popup/modal.vue b/src/platforms/h5/components/app/popup/modal.vue
index 0f3542ab5..eeae9afff 100644
--- a/src/platforms/h5/components/app/popup/modal.vue
+++ b/src/platforms/h5/components/app/popup/modal.vue
@@ -38,13 +38,21 @@
           </div>
         </div>
       </div>
+      <keypress
+        :disable="!visible"
+        @esc="_close('cancel')"
+        @enter="_close('confirm')"
+      />
     </uni-modal>
   </transition>
 </template>
 <script>
 import transition from './mixins/transition'
+import keypress from '../../../helpers/keypress'
+
 export default {
   name: 'Modal',
+  components: { keypress },
   mixins: [transition],
   props: {
     title: {
diff --git a/src/platforms/h5/helpers/keypress.js b/src/platforms/h5/helpers/keypress.js
new file mode 100644
index 000000000..172e7237c
--- /dev/null
+++ b/src/platforms/h5/helpers/keypress.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        this.$emit(keyName, $event)
+      }
+    }
+    document.addEventListener('keydown', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keydown', listener)
+    })
+  },
+  render: () => null
+}
diff --git a/src/platforms/h5/view/components/picker/index.vue b/src/platforms/h5/view/components/picker/index.vue
index 92ad5fece..46457b3e9 100644
--- a/src/platforms/h5/view/components/picker/index.vue
+++ b/src/platforms/h5/view/components/picker/index.vue
@@ -67,6 +67,11 @@
     <div>
       <slot />
     </div>
+    <keypress
+      :disable="!visible"
+      @esc="_cancel"
+      @enter="_change"
+    />
   </uni-picker>
 </template>
 
@@ -74,6 +79,7 @@
 import { emitter } from 'uni-mixins'
 import { formatDateTime } from 'uni-shared'
 import popup from '../../../components/app/popup/mixins/popup'
+import keypress from '../../../helpers/keypress'
 
 function getDefaultStartValue () {
   if (this.mode === mode.TIME) {
@@ -126,6 +132,7 @@ const fields = {
 }
 export default {
   name: 'Picker',
+  components: { keypress },
   mixins: [emitter, popup],
   props: {
     name: {
-- 
GitLab