Skip to content

Commit

Permalink
Merge pull request #853 from xiaoAriana/feat_virtual_keyboard_support…
Browse files Browse the repository at this point in the history
…_paste

virtual keyboard support paste
  • Loading branch information
qifeng0748 authored Jun 12, 2024
2 parents 4242c6c + f7e44fd commit a0f5323
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 7 deletions.
4 changes: 2 additions & 2 deletions components/input-item/README.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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|
Expand All @@ -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|
Expand Down
4 changes: 2 additions & 2 deletions components/input-item/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`|表单获得焦点或内容不为空时展示|
Expand All @@ -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|-|一般用于自定义键盘|
Expand Down
20 changes: 17 additions & 3 deletions components/input-item/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit a0f5323

Please sign in to comment.