Input 输入框

使用指南

用于接受单行文本。

规则

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

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      单行输入 无标题
    </p>
    <h3-input
      ref="input"
      type="text"
      placeholder="请输入…（建议提示输入内容）"
      :maxlength="20"
      count
    />
    <p class="sub-title">
      单行输入 无标题 禁用
    </p>
    <h3-input
      ref="input"
      v-model="value"
      type="text"
      placeholder="请输入"
      :disabled="true"
    />

    <p class="sub-title">
      单行输入 无标题 只读状态
    </p>
    <h3-input
      ref="input"
      v-model="value"
      type="text"
      placeholder="请输入"
      readonly
    />

    <p class="sub-title">
      手机号码输入 (号码自动分段)
    </p>
    <h3-input
      placeholder="请输入"
      type="tel"
      :format="phoneDivide"
      :maxlength="11"
    />

    <p class="sub-title">
      输入数字 (数字支持自动添加千位分隔符)
    </p>
    <h3-input
      :format="toThousands"
      :maxlength="16"
      placeholder="请输入具体金额"
      type="text"
    />

    <p class="sub-title">
      输入密码 (支持对输入内容进行掩码遮盖)
    </p>
    <h3-input placeholder="请输入密码" type="password" plaintext />
    <!-- <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: '奥哲·云枢是一款推动企业数字化转型的低代码',
      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;
    },

    phoneDivide (value) {
      return value.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3');
    },

    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>

与thinking-ui 2.0版组件的区别以及迁移

按照新的单行输入组件规范修改相关样式

1. 弃用的props： extraEmail
2. 弃用的slot: prepend

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	是否可以清除	boolean	true
forceClear	若clearable: ture, 默认focus时才显示, forceClear: true则强制显示	boolean	false
maxlength	最大长度	number	无
border	是否包含下划线，默认有	boolean	true
format	格式化的函数	function	无
plaintext	是否可以切换明文密码	boolean	false

Event

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

Function

• 实例方法

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

Slots

参数	说明
append	input后置插槽