输入框 Input

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

使用

API

安装使用

import { TiInput } from '@titian-design/mobile-vue'

用法示例

基本用法

codesanbox

copy

code

<template>
  <TiInput label="左侧标题" placeholder="用户输入中文案" />
  <TiInput disabled label="禁用" placeholder="placeholder" />
  <TiInput readOnly label="只读" placeholder="placeholder" />
  <TiInput :maxlength="20" label="最大输入长度20" placeholder="placeholder" />
  <TiInput :divider="false" label="不显示底部分割线" placeholder="placeholder" />
  <TiInput required label="必填" placeholder="placeholder" />
  <TiInput :clearable="false" label="不显示清除按钮" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

键盘类型

当只需要弹起特定类型键盘，无需对输入内容格式化的情况推荐使用。

codesanbox

copy

code

<template>
  <TiInput inputmode="decimal" label="文本" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

左侧label文字缺省的行数

codesanbox

copy

code

<template>
  <TiInput :ellipsisLine="0" label="左侧标题超过一行换行" placeholder="placeholder" />
  <TiInput :ellipsisLine="1" label="左侧标题超过一行显示..." placeholder="placeholder" />
  <TiInput :ellipsisLine="2" label="左侧标题超过两行显示..." placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

错误提示

codesanbox

copy

code

<template>
  <TiInput error value="输错了" label="标题" />
  <TiInput errorMessage="手机号格式错误" value="123213" label="手机号" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

输入类型

codesanbox

copy

code

<template>
  <TiInput type="text" label="文本" placeholder="placeholder" />
  <TiInput type="number" label="数字" placeholder="placeholder" />
  <TiInput type="safe-password" label="密码安全输入键盘" placeholder="placeholder" />
  <TiInput type="digit" label="带小数点的数字键盘" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

输入对齐方式

codesanbox

copy

code

<template>
  <TiInput textAlign="left" label="居左展示" placeholder="placeholder" />
  <TiInput textAlign="right" label="居右展示" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

使用图标

codesanbox

copy

code

<template>
  <TiInput prefixIcon="home" label="标题" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

输入框左右使用插槽

+ 86

发验证码

codesanbox

copy

code

<template>
  <TiInput label="手机号" placeholder="placeholder">
    <div style="padding-right: 4px" slot="prefix">+ 86</div>
  </TiInput>
  <TiInput label="验证码" placeholder="placeholder">
    <div slot="suffix">发验证码</div>
  </TiInput>
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

键盘确认按钮文字

codesanbox

copy

code

<template>
  <TiInput confirmType="done" label="完成" placeholder="placeholder" />
  <TiInput confirmType="send" label="发送" placeholder="placeholder" />
  <TiInput confirmType="search" label="搜索" placeholder="placeholder" />
  <TiInput confirmType="next" label="下一项" placeholder="placeholder" />
  <TiInput confirmType="go" label="前往" placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { TiInput } from 'titian-h5-vue';
</script>

TiInput API

属性 Properties

名称	类型	必填	默认值	说明	备注
type	string	否	text	input 的类型,可选值为 text number digit safe-password , 以及iniput 原生 type	-
inputmode	string	否	text	键盘类型，更多取值见input原生inputmode
value	string	否	-	当前输入的值	-
password	boolean	否	false	是否是密码类型	-
placeholder	string	否	-	输入框为空时占位符	-
disabled	boolean	否	false	是否禁用	-
maxlength	number	否	140	最大输入长度，设置为 -1 的时候不限制最大长度	-
prefix-icon	string	否	-	左侧图标名称	-
label	string	否	-	输入框左侧文本	-
divider	boolean	否	true	是否显示底部分割线	-
required	boolean	否	false	是否显示必填星号	-
clearable	boolean	否	true	是否启用清除控件	-
read-only	boolean	否	false	是否只读	-
text-align	string	否	left	输入框内容对齐方式，可选值为 left right	-
error	boolean	否	false	是否将输入内容标红	-
error-message	string	否	-	底部错误提示文案，为空时不展示	-
focus	boolean	否	false	获取焦点	-
confirm-type	string	否	done	设置键盘右下角按钮的文字，仅在 type='text'时生效	-
ext-style	string | Record<string, string>	否	-	根节点样式	-
ellipsis-line	number	否	0	左侧文字缺省的行数	-

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

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