keyboard

packages/components/NumberKeyboard/index.vue

@@ -223,149 +223,154 @@
 </style>
 
 <script>
-import Key from './key'
+  import Key from './key'
 
-export default {
-  name: 'NumberKeyboard',
-  components: {Key},
-  props: {
-    show: Boolean, // eslint-disable-line
-    title: String, // eslint-disable-line
-    closeButtonText: String, // eslint-disable-line
-    theme: {
-      type: String,
-      default: 'default',
+  export default {
+    name: 'NumberKeyboard',
+    components: {Key},
+    props: {
+      show: Boolean, // eslint-disable-line
+      title: String, // eslint-disable-line
+      closeButtonText: String, // eslint-disable-line
+      theme: {
+        type: String,
+        default: 'default',
+      },
+      extraKey: {
+        type: String,
+        default: '',
+      },
+      zIndex: {
+        type: Number,
+        default: 100,
+      },
+      transition: {
+        type: Boolean,
+        default: true,
+      },
+      showDeleteKey: {
+        type: Boolean,
+        default: true,
+      },
+      hideOnClickOutside: {
+        type: Boolean,
+        default: true,
+      },
+      cusClass: {
+        type: String,
+        default: '',
+      },
     },
-    extraKey: {
-      type: String,
-      default: '',
-    },
-    zIndex: {
-      type: Number,
-      default: 100,
-    },
-    transition: {
-      type: Boolean,
-      default: true,
-    },
-    showDeleteKey: {
-      type: Boolean,
-      default: true,
-    },
-    hideOnClickOutside: {
-      type: Boolean,
-      default: true,
-    },
-    cusClass: {
-      type: String,
-      default: '',
-    },
-  },
-  data () {
-    return {
-      keyBoardPlugin: false,
-    }
-  },
-  computed: {
-    keys () {
-      const keys = []
-      for (let i = 1; i <= 9; i++) {
-        keys.push({text: i})
-      }
-      keys.push(
-        {text: this.extraKey, type: 'gray'},
-        {text: 0},
-        {text: 'delete', type: 'delete gray'}
-      )
-
-      return keys
-    },
-    style () {
+    data () {
       return {
-        zIndex: this.zIndex,
+        keyBoardPlugin: false,
       }
     },
-    showTitleClose () {
-      return this.closeButtonText && this.theme === 'default'
-    },
-  },
-  watch: {
-    show () {
-      if (!this.transition) {
-        this.$emit(this.show ? 'show' : 'hide')
-      }
+    computed: {
+      keys () {
+        const keys = []
+        for (let i = 1; i <= 9; i++) {
+          keys.push({text: i})
+        }
+        keys.push(
+          {text: this.extraKey, type: 'gray'},
+          {text: 0},
+          {text: 'delete', type: 'delete gray'}
+        )
+
+        return keys
+      },
+      style () {
+        return {
+          zIndex: this.zIndex,
+        }
+      },
+      showTitleClose () {
+        return this.closeButtonText && this.theme === 'default'
+      },
     },
-  },
-  mounted () {
-    this.handler(true)
-    this.$el.setAttribute('vum-show-keyborad', '')
-  },
-  destroyed () {
-    this.handler(false)
-    if (this.keyBoardPlugin) {
-      document.body.removeChild(this.$el)
-    }
-  },
-  activated () {
-    this.handler(true)
-  },
-  deactivated () {
-    this.handler(false)
-  },
-  methods: {
-    closeKeyboard () {
-      let vm = this
-      this.show = false
-      let wrapper = document.querySelector('[vum-show-keyborad]')
-      if (wrapper && vm.keyBoardPlugin) {
-        document.body.removeChild(wrapper)
-      }
+    watch: {
+      show () {
+        if (!this.transition) {
+          this.$emit(this.show ? 'show' : 'hide')
+        }
+      },
     },
-    showNumberKeyboard (options) {
-      this.keyBoardPlugin = true
-      this.title = options.title
-      this.closeButtonText = options.closeButtonText
-      this.extraKey = options.extraKey
-      this.keyDown = options.keyDown
-      this.keyDelete = options.keyDelete
-      this.show = true
+    mounted () {
+      this.handler(true)
+      this.$el.setAttribute('vum-show-keyborad', '')
     },
-    handler (action) {
-      if (action !== this.handlerStatus && this.hideOnClickOutside) {
-        this.handlerStatus = action
-        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur)
+    destroyed () {
+      this.handler(false)
+      if (this.keyBoardPlugin) {
+        document.body.removeChild(this.$el)
       }
     },
-    onBlur () {
-      this.$emit('blur')
-    },
-    onClose () {
-      this.$emit('close')
-      this.show = false
-      this.onBlur()
+    activated () {
+      this.handler(true)
     },
-    onAnimationEnd () {
-      this.$emit(this.show ? 'show' : 'hide')
+    deactivated () {
+      this.handler(false)
     },
-    onPressKey (text) {
-      let vm = this
-      if (text === '') {
-        return
-      }
-      if (text === 'delete') {
-        this.$emit('delete')
-        if (vm.keyDelete) {
-          vm.keyDelete()
+    methods: {
+      closeKeyboard () {
+        let vm = this
+        let wrapper = document.querySelector('[vum-show-keyborad]')
+        if (wrapper && vm.keyBoardPlugin) {
+          this.show = false
+          try {
+            document.body.removeChild(wrapper)
+          } catch (e) {
+          }
+        } else if (vm.keyBoardPlugin === false && vm.hideOnClickOutside) {
+          this.onClose()
         }
-      } else if (text === this.closeButtonText) {
-        this.onClose()
-      } else {
-        this.$emit('input', text)
-        if (vm.keyDown) {
-          vm.keyDown(text)
+      },
+      showNumberKeyboard (options) {
+        this.keyBoardPlugin = true
+        this.title = options.title
+        this.closeButtonText = options.closeButtonText
+        this.extraKey = options.extraKey
+        this.keyDown = options.keyDown
+        this.keyDelete = options.keyDelete
+        this.show = true
+      },
+      handler (action) {
+        if (action !== this.handlerStatus && this.hideOnClickOutside) {
+          this.handlerStatus = action
+          document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur)
         }
-      }
+      },
+      onBlur () {
+        this.$emit('blur')
+      },
+      onClose () {
+        this.$emit('close')
+        this.show = false
+        this.onBlur()
+      },
+      onAnimationEnd () {
+        this.$emit(this.show ? 'show' : 'hide')
+      },
+      onPressKey (text) {
+        let vm = this
+        if (text === '') {
+          return
+        }
+        if (text === 'delete') {
+          this.$emit('delete')
+          if (vm.keyDelete) {
+            vm.keyDelete()
+          }
+        } else if (text === this.closeButtonText) {
+          this.onClose()
+        } else {
+          this.$emit('input', text)
+          if (vm.keyDown) {
+            vm.keyDown(text)
+          }
+        }
+      },
     },
-  },
-}
+  }
 </script>