Input 输入框

使用指南

用于接受单行文本。

规则

• 支持通过键盘或者剪切板输入文本。
• 通过光标可以在水平方向进行移动。
• 对特定格式的文本进行处理，eg：隐藏密码。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      不带边框的输入框 适合跟field组合使用
    </p>
    <h3-input
      ref="input"
      v-model="valueCN"
      :border="false"
      type="text"
      placeholder="不带边框"
    />
    <br />
    <h3-button @click="setFocus()" type="primary">
      点击获取焦点
    </h3-button>
    <p class="sub-title">
      带格式化的输入框(焦点消失时格式化)
    </p>
    <h3-input
      :format="bandCard"
      :maxlength="16"
      placeholder="8888 8888 8888 8888"
      type="text"
    />

    <p class="sub-title">
      邮箱提示 type = "email"
    </p>
    <h3-input :extraEmail="['@authine.com']" placeholder="请输入邮箱(尝试 @ 会触发建议)" type="email" />
    <p class="sub-title">
      密码 可以开启密码显示输入
    </p>
    <h3-input placeholder="请输入密码" type="password" plaintext />
    <p class="sub-title">
      数字键盘使用
    </p>
    <h3-input
      ref="keyboard"
      v-model="value2"
      @click="keyboardVisible = true"
      placeholder="点击显示自定义数字键盘"
      readonly
    />
    <h3-number-keyboard
      v-model="keyboardVisible"
      :reference="elem"
      :value="value2"
      @change="value2 = $event"
    />
    <p class="sub-title">
      前后而外slot
    </p>
    <h3-input placeholder="请输入用户名" type="text" border>
      <template #prepend>
        <h3-icon type="user-o" />
      </template>
    </h3-input>
    <br />
    <h3-input placeholder="请输入银行卡" type="text" border>
      <template #append>
        <h3-icon type="scan-o" />
      </template>
    </h3-input>
    <p class="sub-title">
      对输入进行处理
    </p>
    <h3-input
      v-model="text"
      @change="textInput"
      :wait="0"
      type="text"
    />
  </div>
</template>

<script>
import H3Input from '@/components/h3-input/';
import H3Icon from '@/components/h3-icon/';
import H3Button from '@/components/h3-button/';
import H3NumberKeyboard from '@/components/h3-number-keyboard/';

export default {
  name: 'Input',
  components: {
    H3Input,
    H3Button,
    H3Icon,
    H3NumberKeyboard,
  },
  props: {},
  data () {
    return {
      keyboardVisible: false,
      value: '1111',
      value2: '',
      valueCN: '',
      text: '',
      elem: null,
    };
  },
  computed: {},
  mounted () {
    this.elem = this.$refs.keyboard;
  },
  methods: {
    toThousands (num) {
      const nums = num.toString().split('.');
      let tmpNum = nums[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      if (nums.length > 1) {
        tmpNum += `.${nums[1]}`;
      }
      return tmpNum;
    },
    bandCard (tempValue) {
      return tempValue.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
    },
    setFocus () {
      this.$refs.input.focus();
    },
    textInput (e) {
      let val = e;
      // 剔除表情符
      // val = val.replace(filterEmojiExp, '');
      // 剔除空字符
      val = val.replace(/(^\s*)|(\s*$)/g, '');
      // 长度不能超过50
      val = val.substr(0, 5);
      console.log(val);
      this.text = val;
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库输入框与list及field组件过于耦合，因此新组件单独做成一个纯粹的input的组件。

旧组件的type有bankCard、phone、password、number、digit、money等类型，其中bankCard、phone、money是为了格式化，为了尽可能的灵活使用，及减轻组件内部逻辑，因此新增了format的prop，灵活的格式化输出值。同时因为在输入时格式化会导致一些输入问题，因此现统一为当input失焦后才格式化，返回的值仍为原始值。

同时给组件新增前后slot，把之前hasExtra scanClick 等内置的图标去掉，更加灵活。

分离了 h3-number-keyboard 数字键盘组件

若要做迁移请参考

1. 弃用的props：h3style title defaultValue error hasExtra extra labelNumber updatePlaceholder prefixListCls moneyKeyboardAlign onChange onBlur onFocus onErrorClick onExtraClick keyboard

2. 替换的props：

   • clear => clearable
   • maxLength => maxlength
   • editable => readonly
   • password => plaintext

3. 新增的props：wait border

4. 弃用原来所有的事件

API

Prop

属性	说明	类型	默认值
value	value，v-model绑定值	string	无
name	input 的 name	string	无
type	text number password email tel url 等input原生类型	string	text
placeholder	提示文本	string	''
wait	设置change事件触发事件间隔多久触发，单位ms	number	200
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
clearable	是否可以清除(仅readonly为false,disabled为false才生效)	boolean	true
forceClear	若clearable: ture, 默认focus时才显示, forceClear: true则强制显示	boolean	false
maxlength	最大长度	number	无
border	是否包含边框	boolean	true
format	格式化的函数	function	无
plaintext	是否可以切换明文密码	boolean	false
extraEmail	额外的邮箱地址建议，请带上@符号 eg: ['@authine.com']	array	[]

Event

事件名	说明	参数
input	文本改变时触发，v-model绑定事件	value：文本内容
change	文本改变时触发	value：文本内容
focus	文本聚焦触发	evt
blur	文本失焦触发	evt
click	点击输入框触发	evt

Function

• 实例方法

方法名	说明	参数
focus	使input获取焦点	-
blur	使input失去焦点	-

Slots

参数	说明
prepend	input前置插槽
append	input后置插槽