@beisen-phoenix/input

@beisen-phoenix/input

Usage no npm install needed!

<script type="module">
  import beisenPhoenixInput from 'https://cdn.skypack.dev/@beisen-phoenix/input';
</script>

README

基础输入框

@beisen-phoenix/input

概述

通过鼠标或键盘输入内容,是最基础的表单域的包装。

API

参数 说明 类型 默认值 是否必传
type 输入框类型,仅支持 text password hidden string text
size 输入框尺寸,支持 default large small string default
value 输入框内容 string -
defaultValue 输入框默认内容,若使用了 value,则 defaultValue 无效 boolean -
placeholder 同原生 input string 请输入
status 输入框状态,正常、禁用、提示、错误,支持 normal disabled isHint error string normal
readOnly 只读状态,不能输入,不显示清除按钮 boolean false
autoFocus 首次挂载时是否自动获取焦点 boolean false
maxLength 最大输入字符数,同原生 input number -
prefix 前缀元素 React.ReactNode -
suffix 后缀元素,同 prefix React.ReactNode -
translation 国际化,详情见下方 object -
onChange 输入框内容变化时的回调 function(value: string) -
onFocus 获取焦点时的回调 function(value: string) -
onBlur 失去焦点时的回调 function(value: string) -
onEnter 按下回车的回调 function(value: string) -
onClear 按下清除图标的回调 function() -
onClick 点击输入框时的回调 function(event) -
extraCls 自定义组件容器 class,一般用于覆盖组件默认样式使用 string -
clearFocus 输入框激活时 点击清除按钮 输入框是否激活 boolean false
allowPoprationOnClear 点击清除按钮时,click 事件是否冒泡 boolean false
lang 当前语言环境(zh_CN,en_US,zh_TW) string zh_CN

translation

translation: {
  placeholder: '请输入'
}

2019-11-19

新增 lang 属性,用于表示当前的语言环境,取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。

2019-09-12

更新设计: 可操作输入框文字超长时打点【保证 chrome 能正常打点即可】,不显示 tooltip 仅在禁用,只读时显示 tooltip

2019-09-18

新增 api | clearFocus | 输入框激活时 点击清除按钮 输入框是否激活 | boolean | false | 否 |