跳到主要内容

输入框 Input

输入框用于通过键盘输入内容，适用于单行文本

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-input": "@titian-design/weapp/input/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-input": "platform://titian-mp/ti-input"
  }
}

用法示例​

基本用法
copy
code
键盘类型
当只需要弹起特定类型键盘，无需对输入内容格式化的情况推荐使用。
copy
code
左侧label文字缺省的行数
copy
code
错误提示
copy
code
输入类型
copy
code
输入对齐方式
copy
code
使用图标
copy
code
输入框左右使用插槽
+ 86
发验证码
copy
code
键盘确认按钮文字
copy
code

ti-input API​

属性 Properties​

名称类型必填默认值说明备注
typestring否'text'input 的类型,可选值为 text number idcard digit safe-password nickname-
valuestring否-当前输入的值, 支持简易双向绑定 model:value（仅微信渠道支持）-
passwordboolean否false是否是密码类型-
placeholderstring否-输入框为空时占位符-
placeholder-stylestring否-指定 placeholder 的样式-
disabledboolean否false是否禁用-
maxlengthnumber否140最大输入长度，设置为 -1 的时候不限制最大长度-
prefix-iconstring否-左侧图标名称-
labelstring否-输入框左侧文本-
dividerboolean否true是否显示底部分割线-
requiredboolean否false是否显示必填星号-
clearableboolean否true是否启用清除控件-
read-onlyboolean否false是否只读-
text-alignstring否'left'输入框内容对齐方式，可选值为 left right-
errorboolean否false是否将输入内容标红-
error-messagestring否-底部错误提示文案，为空时不展示-
cursor-spacingnumber否0指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离-
focusboolean否false获取焦点-
confirm-typestring否'done'设置键盘右下角按钮的文字，仅在 type='text'时生效-
always-embedboolean否false强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)-
confirm-holdboolean否false点击键盘右下角按钮时是否保持键盘不收起-
cursornumber否-指定 focus 时的光标位置-
selection-startnumber否-1光标起始位置，自动聚集时有效，需与 selection-end 搭配使用-
selection-endnumber否-1光标结束位置，自动聚集时有效，需与 selection-start 搭配使用-
adjust-positionboolean否false键盘弹起时，是否自动上推页面-
hold-keyboardboolean否falsefocus 时，点击页面的时候不收起键盘-
safe-password-cert-pathstring否-安全键盘加密公钥的路径，只支持包内路径-
safe-password-lengthnumber否-安全键盘输入密码长度-
safe-password-time-stampnumber否-安全键盘加密时间戳-
safe-password-noncestring否-安全键盘加密盐值-
safe-password-saltstring否-安全键盘计算 hash 盐值，若指定 custom-hash 则无效-
safe-password-custom-hashstring否-安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar'))))-
ext-stylestring否-根节点样式

事件 Events​

名称参数列表描述备注
bind:input(e: WechatMiniprogram.CustomEvent<{value: number | string, keyCode: string}>) => void键盘输入时触发-
bind:focus(e: WechatMiniprogram.CustomEvent<{value: number | string}>) => void输入框聚焦时触发-
bind:blur(e: WechatMiniprogram.CustomEvent<{value: number | string}>) => void输入框失去焦点时触发-
bind:confirm(e: WechatMiniprogram.CustomEvent<{value: number | string}>) => void点击完成按钮时触发-
bind:clear(e: WechatMiniprogram.CustomEvent) => void点击清除图标是触发-
bind:change(e: WechatMiniprogram.CustomEvent<{value: number | string}>) => void输入值改变时触发-

插槽 Slots​

名称说明备注
prefix-iconlabel 左侧图标-
prefix输入框左侧侧插槽-
suffix输入框右侧插槽-

外部样式类 External Classes​

名称说明备注
ext-class根节点样式类-
label-class输入框左侧文本样式类-
input-classinput 样式类-

CSS 变量 CSS Variable​

变量默认值说明备注
--input-line-heighttheme.lineHeight.multiline.t6文字行高-
--input-padding-vtheme.spacing.vertical.v8垂直方向内边距-
--input-padding-htheme.spacing.horizontal.h7水平方向内边距-
--input-font-sizetheme.fontSize.t6字体大小-
--input-label-width168px左侧 label，包括间隙。输入框距最左侧宽度-
--input-title-max-width140px左侧文字局域最大宽度-
--input-placeholder-colortheme.color.gray.texticon.400placeholder 颜色-
--input-font-colortheme.color.gray.texticon.900输入文字颜色-
--input-placeholder-error-colortheme.color.function.error.1000错误提示下 placeholder 颜色-
--input-widthautoinput容器宽度-
--input-background#fffinput容器背景-
--input-required-font-sizetheme.fontSize.t4必填星号，字号-
--input-required-line-heighttheme.lineHeight.multiline.t5必填星号，行高-
--input-required-colortheme.color.function.error.1000必填星号，颜色-
--input-required-gaptheme.spacing.gap.g1必填星号，距离左侧文字gap-
--input-error-message-font-sizetheme.fontSize.t4错误信息的文字大小-