InputItem 输入框

Scan me!

单行文本输入框,支持特殊场景文本格式化

引入

  1. import { InputItem } from 'mand-mobile'
  2. Vue.component(InputItem.name, InputItem)

使用指南

input-item表单校验可使用第三方工具,如vee-validate,使用示例可参考表单校验)

代码演示

普通输入框

  1. <template>
  2. <div class="md-example-child md-example-child-input-item-0">
  3. <md-field>
  4. <md-input-item
  5. ref="input0"
  6. title="普通文本"
  7. placeholder="普通文本"
  8. :maxlength="5"
  9. ></md-input-item>
  10. <md-input-item
  11. ref="input1"
  12. title="禁用表单"
  13. value="禁用表单"
  14. disabled
  15. ></md-input-item>
  16. <md-input-item
  17. ref="input12"
  18. title="只读表单"
  19. value="只读表单"
  20. readonly
  21. ></md-input-item>
  22. <md-input-item
  23. ref="input13"
  24. title="高亮表单"
  25. placeholder="高亮表单"
  26. is-highlight
  27. ></md-input-item>
  28. <md-input-item
  29. ref="input2"
  30. title="大尺寸表单"
  31. placeholder="大尺寸表单"
  32. size="large"
  33. ></md-input-item>
  34. <md-input-item
  35. ref="input3"
  36. title="文本居中"
  37. placeholder="文本居中"
  38. align="center"
  39. ></md-input-item>
  40. <md-input-item
  41. ref="input4"
  42. title="文本居右"
  43. placeholder="文本居右"
  44. align="right"
  45. ></md-input-item>
  46. </md-field>
  47. </div>
  48. </template>
  49. <script>
  50. import {InputItem, Field} from 'mand-mobile'
  51. export default {
  52. name: 'input-item-demo',
  53. components: {
  54. [InputItem.name]: InputItem,
  55. [Field.name]: Field,
  56. },
  57. }
  58. </script>

业务场景输入框

  1. <template>
  2. <div class="md-example-child md-example-child-input-item-2">
  3. <md-field>
  4. <md-input-item
  5. title="银行卡"
  6. type="bankCard"
  7. placeholder="bankCard xxxx xxxx xxxx xxxx"
  8. ></md-input-item>
  9. <md-input-item
  10. title="手机号"
  11. type="phone"
  12. v-model="phone"
  13. placeholder="phone xxx xxxx xxxx"
  14. ></md-input-item>
  15. <md-input-item
  16. title="金额"
  17. type="money"
  18. v-model="money"
  19. @keydown="onInputKeydown"
  20. @change="onInputChange"
  21. placeholder="money xx, xxx.xxxx"
  22. ></md-input-item>
  23. <md-input-item
  24. title="数字"
  25. type="digit"
  26. v-model="digit"
  27. placeholder="digit 0123456789"
  28. ></md-input-item>
  29. <md-input-item
  30. title="密码"
  31. type="password"
  32. placeholder="password *********"
  33. ></md-input-item>
  34. <md-input-item
  35. title="邮箱"
  36. type="email"
  37. placeholder="其他标准 html input 类型"
  38. ></md-input-item>
  39. </md-field>
  40. </div>
  41. </template>
  42. <script>
  43. import {InputItem, Field} from 'mand-mobile'
  44. export default {
  45. name: 'input-item-demo',
  46. components: {
  47. [InputItem.name]: InputItem,
  48. [Field.name]: Field,
  49. },
  50. data() {
  51. return {
  52. phone: '13321234431',
  53. money: '',
  54. digit: '',
  55. }
  56. },
  57. methods: {
  58. onInputKeydown(event) {
  59. console.log(`[Mand Mobile InputItem keydown] ${event.keyCode}`)
  60. },
  61. onInputChange(name, value) {
  62. console.log(`[Mand Mobile InputItem change] ${value}`)
  63. },
  64. },
  65. }
  66. </script>

错误提示

  1. <template>
  2. <div class="md-example-child md-example-child-input-item-4">
  3. <md-field>
  4. <md-input-item
  5. ref="input11"
  6. title="手机号码"
  7. value="1999999999999"
  8. error="手机号码位数有误"
  9. clearable
  10. ></md-input-item>
  11. <md-input-item
  12. ref="input11"
  13. title="手机号码"
  14. value="1999999999999"
  15. error="手机号码位数有误"
  16. clearable
  17. is-title-latent
  18. ></md-input-item>
  19. </md-field>
  20. </div>
  21. </template>
  22. <script>
  23. import {InputItem, Field} from 'mand-mobile'
  24. export default {
  25. name: 'input-item-demo',
  26. components: {
  27. [InputItem.name]: InputItem,
  28. [Field.name]: Field,
  29. },
  30. }
  31. </script>

标题浮动输入框

  1. <template>
  2. <div class="md-example-child md-example-child-input-item-1">
  3. <md-field>
  4. <md-input-item
  5. ref="name"
  6. title="真实姓名"
  7. placeholder="投保人姓名"
  8. is-title-latent
  9. clearable
  10. ></md-input-item>
  11. <md-input-item
  12. ref="id"
  13. title="身份证号"
  14. placeholder="投保人身份证号"
  15. is-title-latent
  16. clearable
  17. ></md-input-item>
  18. </md-field>
  19. </div>
  20. </template>
  21. <script>
  22. import {InputItem, Field} from 'mand-mobile'
  23. export default {
  24. name: 'input-item-demo',
  25. components: {
  26. [InputItem.name]: InputItem,
  27. [Field.name]: Field,
  28. },
  29. }
  30. </script>

表单控件

  1. <template>
  2. <div class="md-example-child md-example-child-input-item-3">
  3. <md-field>
  4. <md-input-item
  5. ref="input9"
  6. title="带清空按钮"
  7. placeholder="normal text"
  8. value="with clear button"
  9. clearable
  10. ></md-input-item>
  11. <md-input-item
  12. ref="input10"
  13. title="带金融键盘"
  14. placeholder="financial number keyboard"
  15. is-virtual-keyboard
  16. clearable
  17. @focus="onFakeInputFocus"
  18. @blur="onFakeInputBlur"
  19. ></md-input-item>
  20. <md-input-item
  21. ref="input11"
  22. placeholder="left/right slots"
  23. >
  24. <md-icon name="bank-zs" slot="left"></md-icon>
  25. <md-icon name="circle-alert" slot="right" @click.native="onClick"></md-icon>
  26. </md-input-item>
  27. </md-field>
  28. </div>
  29. </template>
  30. <script>
  31. import {InputItem, Field, Icon, Toast} from 'mand-mobile'
  32. import '@examples/assets/images/bank-zs.svg'
  33. export default {
  34. name: 'input-item-demo',
  35. components: {
  36. [InputItem.name]: InputItem,
  37. [Field.name]: Field,
  38. [Icon.name]: Icon,
  39. },
  40. methods: {
  41. onClick() {
  42. Toast({
  43. content: 'some information',
  44. icon: 'circle-alert',
  45. })
  46. },
  47. onFakeInputFocus() {
  48. function getElementPosition(element) {
  49. const defaultRect = {top: 0, left: 0}
  50. const rect = element
  51. ? (element.getBoundingClientRect && element.getBoundingClientRect()) || defaultRect
  52. : defaultRect
  53. const ret = {
  54. top: rect.top,
  55. left: rect.left,
  56. }
  57. return ret
  58. }
  59. setTimeout(() => {
  60. const wrapper = this.$el
  61. const inputer = this.$refs['input10']
  62. const inputEl = inputer.$el
  63. const keyboardEl = document
  64. .querySelector(`#${inputer.name}-number-keyboard`)
  65. .querySelector('.md-number-keyboard-container')
  66. const offset =
  67. keyboardEl.clientHeight +
  68. inputEl.clientHeight -
  69. document.documentElement.clientHeight +
  70. getElementPosition(inputEl).top +
  71. 30
  72. const oldPaddingBottom = +wrapper.style.paddingBottom.replace(/px|rem|em/gi, '')
  73. const oldScrollTop = document.body.scrollTop
  74. const newPaddingBottom = oldPaddingBottom + offset
  75. const newScrollTop = oldScrollTop + offset
  76. wrapper.style.paddingBottom = `${newPaddingBottom}px`
  77. document.body.scrollTop = newScrollTop
  78. this.scrollInputBack = () => {
  79. wrapper.style.paddingBottom = `${oldPaddingBottom}px`
  80. document.body.scrollTop = oldScrollTop
  81. this.scrollInputBack = null
  82. }
  83. }, 300)
  84. },
  85. onFakeInputBlur() {
  86. this.scrollInputBack && this.scrollInputBack()
  87. },
  88. },
  89. }
  90. </script>
  91. <style lang="stylus">
  92. .md-example-child-input-item-2
  93. .md-number-keyboard .md-popup-box
  94. max-width 720px
  95. </style>
  96.  

API

InputItem Props

属性说明类型默认值备注
type表单类型,特殊类型自带文本格式化Stringtexttext(文本),bankCard(银行卡号),phone(手机号),money(金额),digit(数字),password(密码),以及其他的标准Html Input类型
name表单名称String-事件入参之一,可用于区分表单组件
v-model表单值String--
title表单左侧标题String-可以传入HtmlFragment,也可直接使用slot left代替
placeholder表单占位符String--
maxlength表单最大字符数String/Number-phone类型固定为11
size表单尺寸Stringnormallarge,normal
align表单文本对齐方式Stringleftleft,center,right
error表单错误提示信息String--
readonly表单是否只读Booleanfalse-
disabled表单是否禁用Booleanfalse-
is-title-latent表单标题是否隐藏Booleanfalse表单获得焦点或内容不为空时展示
is-highlight表单是否高亮Booleanfalse只影响placeholder字体颜色
is-formative表单文本是否根据类型自动格式化BooleantypebankCard,phone, money默认为true,否则为false-
formation表单文本格式化回调方法Function(name, curValue, curPos): {value: curValue, range: curPos}-传入参数name为表单名称,curValue为表单值,curPos为表单光标当前所在位置返回参数value格式化值, range表单光标格式化后所在位置
clearable表单是否使用清除控件Booleanfalse-
is-virtual-keyboard表单是否使用金融数字键盘控件Booleanfalse-
virtual-keyboard-disorder金融数字键盘数字键乱序Booleanfalse-
virtual-keyboard-ok-text金融数字键盘确认键文案String确定-

InputItem Slots

left

左侧插槽,一般用于放置图标等

right

右侧插槽,一般用于放置图标等

InputItem Methods

focus()

表单获得焦点

blur()

表单失去焦点

getValue()

获取表单值

InputItem Events

@focus(name)

表单获得焦点事件

@blur(name)

表单失去焦点事件

@change(name, value)

表单值变化事件

@confirm(name, value)

表单值确认事件, 仅使用金融数字键盘或组件在form元素内时有效

@keyup(name, event)

表单按键按下事件,仅is-virtual-keyboardfalse时触发

@keydown(name, event)

表单按键释放事件,仅is-virtual-keyboardfalse时触发

表单校验