fix(input-item): change virtualKeyboardVm type to string

use ref name to look up a component instance in context instead of passing a reference directly #335
didi · Mar 12, 2019 · 623bed0 · 623bed0
1 parent 43048bb
commit 623bed0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/components/input-item/README.en-US.md b/components/input-item/README.en-US.md
@@ -46,7 +46,7 @@ Vue.component(InputItem.name, InputItem)
 |is-virtual-keyboard|use financial number keyboard control|Boolean|`false`|-|
 |virtual-keyboard-disorder|if number keys of financial number keyboard is out of order|Boolean|`false`|-|
 |virtual-keyboard-ok-text|confirmation key texts of financial number keyboard|String|`confirm`|-|
-|virtual-keyboard-vm|financial number keyboard instance|Object|-|generally used for custom number keyboard|
+|virtual-keyboard-vm|financial number keyboard ref name|String|-|generally used for custom number keyboard|
 
 #### InputItem Slots
 

diff --git a/components/input-item/README.md b/components/input-item/README.md
@@ -47,7 +47,7 @@ Vue.component(InputItem.name, InputItem)
 |is-virtual-keyboard|表单是否使用金融数字键盘控件|Boolean|`false`|-|
 |virtual-keyboard-disorder|金融数字键盘数字键乱序|Boolean|`false`|-|
 |virtual-keyboard-ok-text|金融数字键盘确认键文案|String|`确定`|-|
-|virtual-keyboard-vm|金融数字键盘实例|Object|-|一般用于自定义键盘|
+|virtual-keyboard-vm|金融数字键盘`ref`名称|String|-|一般用于自定义键盘|
 
 #### InputItem Slots
 

diff --git a/components/input-item/demo/cases/demo4.vue b/components/input-item/demo/cases/demo4.vue
@@ -23,7 +23,7 @@
         title="自定义键盘"
         placeholder="custom number keyboard"
         is-virtual-keyboard
-        :virtual-keyboard-vm="$refs.myNumberKeyBoard"
+        virtual-keyboard-vm="myNumberKeyBoard"
         clearable
       ></md-input-item>
       <md-number-keyboard type="simple" ref="myNumberKeyBoard"></md-number-keyboard>

diff --git a/components/input-item/index.vue b/components/input-item/index.vue
@@ -206,7 +206,8 @@ export default {
       type: String,
     },
     virtualKeyboardVm: {
-      type: Object,
+      type: [Object, String],
+      default: null,
     },
     isTitleLatent: {
       type: Boolean,
@@ -429,7 +430,10 @@ export default {
       document.removeEventListener('click', this.$_blurFakeInput, false)
     },
     $_initNumberKeyBoard() {
-      const keyboard = this.virtualKeyboardVm || this.$refs['number-keyboard']
+      const keyboard =
+        (typeof this.virtualKeyboardVm === 'object'
+          ? this.virtualKeyboardVm
+          : this.$vnode.context.$refs[this.virtualKeyboardVm]) || this.$refs['number-keyboard']
       keyboard.$on('enter', this.$_onNumberKeyBoardEnter)
       keyboard.$on('delete', this.$_onNumberKeyBoardDelete)
       keyboard.$on('confirm', this.$_onNumberKeyBoardConfirm)