表单组件 - fg-input单行输入 - 《大前端Weex》

介绍
图示
代码演示
API
- 注：以下api或值不建议使用
样式
事件
- 方法
demo链接：
开发方案链接：

介绍

本身是一个weex的内置组件，提供单行输入能力，用于接收用户输入字符，常用于表单项。

图示

代码演示

基础样式、事件实现

<input
  ref="input"
  class="input"
  value="输入框文本"
  :placeholder="占位文本"
  :type="text"
  :disabled="false"
  :maxlength="100"
  returnKeyType="done"
  :autofocus="true"
  @input="onInput"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
  @return="onReturn"
  @keyboard="onKeyboard"
/>
.input {
   placeholder-color: #333333;
}

方法调用

// 获得焦点
this.$refs.input.focus()
// 失去焦点
this.$refs.input.blur()
// 设置文本选中
this.$refs.input.setSelectionRange(2, 5)
// 读取选中区间
this.$refs.input.getSelectionRange((params) => {
    console.log(`返回值：${JSON.stringify(params)}`)
})
// 返回值：{"selectionStart":2,"selectionEnd":5} 
// 设置输入内容格式化
this.$refs.input.setTextFormatter({
      formatRule: '/[0-9]/g',
      formatReplace: 'a',
      recoverRule: '/[^0-9]/g',
      recoverReplace: 'b',
})

API

参数	说明	类型	默认值
type	键盘样式，可选值如下	string	text
	text 键盘为普通文本格式
	email 键盘为带@的快捷样式
	password 输入内容会变成圆点
	tel 键盘为数字和#*-的快捷样式
	url 键盘为带.com的快捷样式
	number 键盘为数字和.的快捷样式
value	输入框的默认内容	string	-
v-modal	默认支持v-modal
placeholder	占位文案	string	-
autofocus	表示是否在页面加载时控件自动获得输入焦点	boolean	-
maxlength	可输入内容的最大长度	number	-
return-key-type	键盘返回键的类型，支持 defalut;go;next;search;send,done	string	-
disabled	禁用	boolean	false
allowCopyPaste	是否支持双击进行复制、剪切、全选等操作	boolean	false
hideDoneButton	隐藏键盘上面的完成栏，只支持ios	boolean	false
upriseOffsetv	当键盘弹起可能盖住输入框时，页面整体会上移。这个属性指定键盘上边缘与输入框下边缘的间隙。使用 iOS 系统坐标，默认是 20，只支持ios	number	20
formatPattern	格式化输入内容（详情见扩展）	string	“”

注：以下api或值不建议使用

参数	说明	类型	默认值
type	date、time、datetime值不建议使用，在ios14上未做适配，会导致问题	string
singleline	控制内容是否只允许单行（实测没什么用）	boolean	true
max	控制当 type 属性为 date 时选择日期的最大时间，格式为 yyyy-MM-dd (不太好用)	string	-
min	控制当 type 属性为 date 时选择日期的最小时间，格式为 yyyy-MM-dd（不太好用）	string	-

样式

参数	说明	类型	默认值
通用样式	Weex-通用样式
placeholderColor	placeholder 字符颜色	string	#999999

事件

名称	说明	回调参数	参数说明
通用事件	Weex-通用事件
input	用户输入时，会不断触发	value	当前文本
change	用户输入结束且文本有改变时触发	value	当前文本
focus	输入框获得焦点时触发	-
blur	输入框失去焦点时触发	-
return	用户点击了“回车”按钮时触发	value	当前文本
		returnKeyType	返回按钮类型：”default” \| “go” \| “next” \| “search” \| “send” \| “done”
keyboard	键盘弹起或收起时触发	isShow	键盘是否显示
		keyboardSize	键盘的尺寸，以前端使用的样式单位返回

注：支持除click事件以外的所有通用事件，如果只实现了click事件，会无法触发输入框获取焦点。

方法

事件名	参数	说明
focus	-	让输入框获得焦点
blur	-	让输入框失去焦点并关闭键盘
setSelectionRange	selectionStart，numbe，文本选中区域起始位 selectionEnd，number，文本选中区域结束位	设置文本选中区域
getSelectionRange	callback:function，参数同上	获取文本选中区域
setTextFormatter	formatRule，regexp，格式化匹配的正则表达式 formatReplace，regexp，格式化匹配后用于替换的内容 recoverRule，regexp，从格式化后的内容还原原始内容的正则表达式 recoverReplace，regexp，还原原始内容时用于替换的内容	用于输入内容的格式化

demo链接：

fg-input-demo

开发方案链接：

fg-input输入项-开发方案