Merge pull request #853 from xiaoAriana/feat_virtual_keyboard_support_paste

virtual keyboard support paste

components/input-item/README.en-US.md

@@ -36,7 +36,7 @@ Vue.component(InputItem.name, InputItem)
 |maxlength|maximum number of characters that can be entered|String/Number|-|the maxlength of `phone` type is fixed at 11|
 |size|size of input|String|`normal`|`large`,`normal`|
 |align|text alignment|String|`left`|`left`,`center`,`right`|
-|error|error message|String|-|-|
+|error|error message|String|-|add shake animation <sup class="version-after">2.7.1+</sup>|
 |readonly|readonly|Boolean|`false`|-|
 |disabled|disabled|Boolean|`false`|-|
 |is-title-latent|hide title or not|Boolean|`false`|title will be displayed when input is focused or content is not empty|
@@ -45,7 +45,7 @@ Vue.component(InputItem.name, InputItem)
 |is-amount|the input is financial figures|Boolean|`false`|-|
 |formation|input text formatting callback function|Function(name, curValue, curPos): {value: curValue, range: curPos}|-|passing parameter `name` is the name of input, `curValue` is input value, `curPos` is the current position of input cursor, and returned `value` is formatted value. `range` is the position of input cursor after formatting|
 |clearable|use clear control or not|Boolean|`false`|-|
-|is-virtual-keyboard|use financial number keyboard control|Boolean|`false`|-|
+|is-virtual-keyboard|use financial number keyboard control|Boolean|`false`|support paste<sup class="version-after">2.7.1+</sup>|
 |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 ref name|String|-|generally used for custom number keyboard|

components/input-item/README.md

@@ -37,7 +37,7 @@ Vue.component(InputItem.name, InputItem)
 |maxlength|表单最大字符数|String/Number|-|`phone`类型固定为11|
 |size|表单尺寸|String|`normal`|`large`,`normal`|
 |align|表单文本对齐方式|String|`left`|`left`,`center`,`right`|
-|error|表单错误提示信息|String|-|-|
+|error|表单错误提示信息|String|-|新增抖动动效<sup class="version-after">2.7.1+</sup>|
 |readonly|表单是否只读|Boolean|`false`|-|
 |disabled|表单是否禁用|Boolean|`false`|-|
 |is-title-latent|表单标题是否隐藏|Boolean|`false`|表单获得焦点或内容不为空时展示|
@@ -46,7 +46,7 @@ Vue.component(InputItem.name, InputItem)
 |is-amount|表单内容为金融数字|Boolean|`false`|-|
 |formation|表单文本格式化回调方法|Function(name, curValue, curPos): {value: curValue, range: curPos}|-|传入参数`name`为表单名称，`curValue`为表单值，`curPos`为表单光标当前所在位置<br/>返回参数`value`格式化值, `range`表单光标格式化后所在位置|
 |clearable|表单是否使用清除控件|Boolean|`false`|-|
-|is-virtual-keyboard|表单是否使用金融数字键盘控件|Boolean|`false`|-|
+|is-virtual-keyboard|表单是否使用金融数字键盘控件|Boolean|`false`|支持粘贴<sup class="version-after">2.7.1+</sup>|
 |virtual-keyboard-disorder|金融数字键盘数字键乱序|Boolean|`false`|-|
 |virtual-keyboard-ok-text|金融数字键盘确认键文案|String|`确定`|-|
 |virtual-keyboard-vm|金融数字键盘`ref`名称|String|-|一般用于自定义键盘|

components/input-item/index.vue

@@ -54,11 +54,11 @@
         }"
         @click="$_onFakeInputClick"
       >
-        <span v-text="inputValue"></span>
-        <span
+        <input class="md-input-item-input" :placeholder="inputPlaceholder" v-model="inputValue"/>
+        <!-- <span
           class="md-input-item-fake-placeholder"
           v-if="inputValue === '' && inputPlaceholder !== ''"
-          v-text="inputPlaceholder"></span>
+          v-text="inputPlaceholder"></span> -->
       </div>
     </template>
 
@@ -652,6 +652,20 @@ export default {
 .md-input-item-msg
   font-size input-item-font-size-error
   color input-item-color-error
+  animation-name errtips
+  animation-duration 0.5s
+
+@keyframes errtips {
+  10% {
+    transform translateX(4px)
+  }
+  60% {
+    transform translateX(-4px)
+  }
+  100% {
+    transform translateX(4)
+  }
+}
 
 .md-input-item
   &.left