APIbeta

Input

Introduce

props

常规属性

名称 描述 类型 可选值 默认值
value / v-model 绑定值 string / number — —
type 类型 string text，textarea, tel, password, email, int, float text
maxlength 原生属性，最大输入长度 number — —
placeholder 输入框占位文本 string — —
disabled 禁用 boolean — false
readonly 只读 boolean — false
required 是否必须 boolean — false
rows 输入框行数，只对 type=”textarea” 有效 number — 2
name input名称 string — -
autocomplete 自动填充行为 off,on - -

扩展属性

名称 描述 类型 可选值 默认值
max 数值类型时的最大值 number — —
min 数值类型时的最小值 number — —
decimal 浮点型时的小数位数 number - -
prefixIcon 前置图标名称 string —
suffixIcon 后置图标名称 string —
prefixLabel 前置文本标签(不能与prefixIcon同时生效) string —
suffixLabel 后置文本标签(不能与suffixIcon同时生效) string —
clearable 清除图标 -
pattern 正则表达式 string - -
validator 数据验证方法,在pattern失败后不会触发 (text:string, callback:(isValid)=>void)=>void; 由回调方法返回是否正确 - -
errorText 输入错误后的文本,会传递到error回调方法中 string - -

events

事件名称 说明 回调参数
blur 在 Input 失去焦点时触发 (event: Event)
focus 在 Input 获得焦点时触发 (event: Event)
change 仅在输入框失去焦点或用户按下回车时触发 (value: string 或 number)
input 在 Input 值改变时触发 (value: string 或 number)
keydown keydown
keyup keyup
error 输入的信息错误时触发 (inputObj:Vue, errorText:string)
click-icon 点击前后图标 (type:string); type为’prefixIcon’或’suffixIcon’

methods

方法名称 说明 回调参数
isValid():boolean 验证输入是否合法 —
text(str) 设置文本 —
text():string 获取文本 —
focus():void 获得焦点 -
markError():void 标记为输入错误状态, 当输入内容改变后按验证规则进行验证. -

example

示例代码.

1
2
3
4
<bp-input value="content" />

<!-- textarea 类型也使用value设置文本内容 -->
<bp-input type="textarea" value="content" />

See the Pen bpui-input by brainpoint (@brainpoint) on CodePen.

自定义主题

图标

组件使用到的图标有:

图标名称 描述
bp-input_warn 错误信息提示图标; 当前内部此图标为空, 如需要可以进行设置
bp-input_clear 清除输入图标

可以使用bpui.icons.registerSvgIcon方式, 进行组件图标自定义

样式结构

组件的样式结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bp-input {
  /* 前后图标 */
  .bp-input__prefixIcon {}
  .bp-input__suffixIcon {}
  /* 前后文本 */
  .bp-input__prefixLabel {}
  .bp-input__suffixLabel {}
  /* 清除图标 */
  .bp-input_clearIcon {}
  /* 文本框 */
  input.bp-input__inner {}

  /* focus 状态 */
  &.bp-input__focus {}
  /* 错误输入的警告状态 */
  &.bp-input__warn {}
  /* disable 状态 */
  &.bp-input__disabled {}

  /* textare 多行文本 */
  &.bp-input__textarea {
    /* 多行文本清除图标 */
    .bp-input_clearIcon {}
    /* 文本框 */
    .bp-input__inner {}
  }
  /* 字数显示 */
  .bp-input__counter {}
}

scss样式文件存放在@bpui/input/style 目录下, 可以复制修改以定制主题