单行文本

1 适用场景

用于录入内容，比如姓名、身份证号、手机号、学号、员工编号、银行卡号、会员号等；

2 基础功能

拥有密码显示、最多输入字符、输入统计、前后缀、前后图标、是否清空等功能。

2.1 显示类型

默认为文本；密码模式可得到一个可切换显示隐藏的密码框。

效果

2.2 最多输入

用来限制单行文本的输入字符长度，如果输入超出设置的字符个数将不会录入到输入框中；

2.3 输入统计

开启可以用来展示输入字数统计个数

2.4 前缀/后缀

输入框内首部和尾部增加显示输入的文字

2.5 前图标/后图标

输入框首部和尾部可以设置显示图标

效果

2.6是否清空

开启即可得到一个可清空的输入框，可直接点击 X一键清除输入框内容；

效果

3 高级用法

3.1 获取焦点、失去焦点事件

单行文本在获取焦点、失去焦点时可以自定义一些代码处理；

场景1:单行文本在失去焦点时触发密码强度检查，提醒用户密码的安全性。

例如密码必须包含字母和数字

配置

const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
// 返回匹配结果  
const res = regex.test(this.formData.code);
if (!res) {
  this.$error('密码必须包含数字和字母组合')
}

3.2 自定义输入建议

单行文本可以根据输入内容提供对应的输入建议

配置步骤：开启输入提示和焦点触发提示，开启后会事件会默认生成查询当前表单实体对应字段提示；自定义返回提示内容可以根据这个代码修改。

自定义输入建议模板

可自定义输入建议的显示

效果展示：

自定义输入建议模版内容：

<template #default="{item}"> 
    <div>{{ item.value }}</div>
    <span style="font-size: 12px;color: rgb(180, 180, 180);">{{ item.address }}</span>
</template>

提示内容 - fetchSuggestions 代码：

const suggestions = [{
  "value": "三全鲜食（北新泾店）",
  "address": "长宁区新渔路144号"
}, {
  "value": "Hot honey 首尔炸鸡（仙霞路）",
  "address": "上海市长宁区淞虹路661号"
}, {
  "value": "新旺角茶餐厅",
  "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"
}, {
  "value": "泷千家(天山西路店)",
  "address": "天山西路438号"
}, {
  "value": "胖仙女纸杯蛋糕（上海凌空店）",
  "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"
}, {
  "value": "贡茶",
  "address": "上海市长宁区金钟路633号"
}, {
  "value": "豪大大香鸡排超级奶爸",
  "address": "上海市嘉定区曹安公路曹安路1685号"
}, {
  "value": "茶芝兰（奶茶，手抓饼）",
  "address": "上海市普陀区同普路1435号"
}]
var results = queryString ? suggestions.filter(item => item.value.includes(queryString)) : suggestions;
callback(results)