表单组件 Form - InputItem 输入框 - 《Mand Mobile v1.x 组件文档》

引入
使用指南
代码演示
API
表单校验

InputItem 输入框

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

引入

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

使用指南

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

代码演示

普通输入框

<template>
  <div class="md-example-child md-example-child-input-item-0">
    <md-field>
      <md-input-item
        ref="input0"
        title="普通文本"
        placeholder="普通文本"
        :maxlength="5"
      ></md-input-item>
      <md-input-item
        ref="input1"
        title="禁用表单"
        value="禁用表单"
        disabled
      ></md-input-item>
      <md-input-item
        ref="input12"
        title="只读表单"
        value="只读表单"
        readonly
      ></md-input-item>
      <md-input-item
        ref="input13"
        title="高亮表单"
        placeholder="高亮表单"
        is-highlight
      ></md-input-item>
      <md-input-item
        ref="input2"
        title="大尺寸表单"
        placeholder="大尺寸表单"
        size="large"
      ></md-input-item>
      <md-input-item
        ref="input3"
        title="文本居中"
        placeholder="文本居中"
        align="center"
      ></md-input-item>
      <md-input-item
        ref="input4"
        title="文本居右"
        placeholder="文本居右"
        align="right"
      ></md-input-item>
    </md-field>
  </div>
</template>
<script>
import {InputItem, Field} from 'mand-mobile'
export default {
  name: 'input-item-demo',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
  },
}
</script>

业务场景输入框

<template>
  <div class="md-example-child md-example-child-input-item-2">
    <md-field>
      <md-input-item
        title="银行卡"
        type="bankCard"
        placeholder="bankCard xxxx xxxx xxxx xxxx"
      ></md-input-item>
      <md-input-item
        title="手机号"
        type="phone"
        v-model="phone"
        placeholder="phone xxx xxxx xxxx"
      ></md-input-item>
      <md-input-item
        title="金额"
        type="money"
        v-model="money"
        @keydown="onInputKeydown"
        @change="onInputChange"
        placeholder="money xx, xxx.xxxx"
      ></md-input-item>
      <md-input-item
        title="数字"
        type="digit"
        v-model="digit"
        placeholder="digit 0123456789"
      ></md-input-item>
      <md-input-item
        title="密码"
        type="password"
        placeholder="password *********"
      ></md-input-item>
      <md-input-item
        title="邮箱"
        type="email"
        placeholder="其他标准 html input 类型"
      ></md-input-item>
    </md-field>
  </div>
</template>
<script>
import {InputItem, Field} from 'mand-mobile'
export default {
  name: 'input-item-demo',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
  },
  data() {
    return {
      phone: '13321234431',
      money: '',
      digit: '',
    }
  },
  methods: {
    onInputKeydown(event) {
      console.log(`[Mand Mobile InputItem keydown] ${event.keyCode}`)
    },
    onInputChange(name, value) {
      console.log(`[Mand Mobile InputItem change] ${value}`)
    },
  },
}
</script>

错误提示

<template>
  <div class="md-example-child md-example-child-input-item-4">
    <md-field>
      <md-input-item
        ref="input11"
        title="手机号码"
        value="1999999999999"
        error="手机号码位数有误"
        clearable
      ></md-input-item>
      <md-input-item
        ref="input11"
        title="手机号码"
        value="1999999999999"
        error="手机号码位数有误"
        clearable
        is-title-latent
      ></md-input-item>
    </md-field>
  </div>
</template>
<script>
import {InputItem, Field} from 'mand-mobile'
export default {
  name: 'input-item-demo',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
  },
}
</script>

标题浮动输入框

<template>
  <div class="md-example-child md-example-child-input-item-1">
    <md-field>
      <md-input-item
        ref="name"
        title="真实姓名"
        placeholder="投保人姓名"
        is-title-latent
        clearable
      ></md-input-item>
      <md-input-item
        ref="id"
        title="身份证号"
        placeholder="投保人身份证号"
        is-title-latent
        clearable
        ></md-input-item>
    </md-field>
  </div>
</template>
<script>
import {InputItem, Field} from 'mand-mobile'
export default {
  name: 'input-item-demo',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
  },
}
</script>

表单控件

<template>
  <div class="md-example-child md-example-child-input-item-3">
    <md-field>
      <md-input-item
        ref="input9"
        title="带清空按钮"
        placeholder="normal text"
        value="with clear button"
        clearable
      ></md-input-item>
      <md-input-item
        ref="input10"
        title="带金融键盘"
        placeholder="financial number keyboard"
        is-virtual-keyboard
        clearable
        @focus="onFakeInputFocus"
        @blur="onFakeInputBlur"
      ></md-input-item>
      <md-input-item
        ref="input11"
        placeholder="left/right slots"
      >
        <md-icon name="bank-zs" slot="left"></md-icon>
        <md-icon name="circle-alert" slot="right" @click.native="onClick"></md-icon>
      </md-input-item>
    </md-field>
  </div>
</template>
<script>
import {InputItem, Field, Icon, Toast} from 'mand-mobile'
import '@examples/assets/images/bank-zs.svg'
export default {
  name: 'input-item-demo',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Icon.name]: Icon,
  },
  methods: {
    onClick() {
      Toast({
        content: 'some information',
        icon: 'circle-alert',
      })
    },
    onFakeInputFocus() {
      function getElementPosition(element) {
        const defaultRect = {top: 0, left: 0}
        const rect = element
          ? (element.getBoundingClientRect && element.getBoundingClientRect()) || defaultRect
          : defaultRect
        const ret = {
          top: rect.top,
          left: rect.left,
        }
        return ret
      }
      setTimeout(() => {
        const wrapper = this.$el
        const inputer = this.$refs['input10']
        const inputEl = inputer.$el
        const keyboardEl = document
          .querySelector(`#${inputer.name}-number-keyboard`)
          .querySelector('.md-number-keyboard-container')
        const offset =
          keyboardEl.clientHeight +
          inputEl.clientHeight -
          document.documentElement.clientHeight +
          getElementPosition(inputEl).top +
          30
        const oldPaddingBottom = +wrapper.style.paddingBottom.replace(/px|rem|em/gi, '')
        const oldScrollTop = document.body.scrollTop
        const newPaddingBottom = oldPaddingBottom + offset
        const newScrollTop = oldScrollTop + offset
        wrapper.style.paddingBottom = `${newPaddingBottom}px`
        document.body.scrollTop = newScrollTop
        this.scrollInputBack = () => {
          wrapper.style.paddingBottom = `${oldPaddingBottom}px`
          document.body.scrollTop = oldScrollTop
          this.scrollInputBack = null
        }
      }, 300)
    },
    onFakeInputBlur() {
      this.scrollInputBack && this.scrollInputBack()
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-input-item-2
  .md-number-keyboard .md-popup-box
    max-width 720px
</style>

API

InputItem Props

属性	说明	类型	默认值	备注
type	表单类型，特殊类型自带文本格式化	String	`text`	`text(文本)`,`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	表单尺寸	String	`normal`	`large`,`normal`
align	表单文本对齐方式	String	`left`	`left`,`center`,`right`
error	表单错误提示信息	String	-	-
readonly	表单是否只读	Boolean	`false`	-
disabled	表单是否禁用	Boolean	`false`	-
is-title-latent	表单标题是否隐藏	Boolean	`false`	表单获得焦点或内容不为空时展示
is-highlight	表单是否高亮	Boolean	`false`	只影响`placeholder`字体颜色
is-formative	表单文本是否根据类型自动格式化	Boolean	`type`为`bankCard`,`phone`, `money`默认为`true`，否则为`false`	-
formation	表单文本格式化回调方法	Function(name, curValue, curPos): {value: curValue, range: curPos}	-	传入参数`name`为表单名称，`curValue`为表单值，`curPos`为表单光标当前所在位置返回参数`value`格式化值, `range`表单光标格式化后所在位置
clearable	表单是否使用清除控件	Boolean	`false`	-
is-virtual-keyboard	表单是否使用金融数字键盘控件	Boolean	`false`	-
virtual-keyboard-disorder	金融数字键盘数字键乱序	Boolean	`false`	-
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-keyboard为false时触发

@keydown(name, event)

表单按键释放事件，仅is-virtual-keyboard为false时触发