Input 输入框

介绍

在输入框内输入或编辑文字。

基础用法

通过 v-model 绑定输入框的值。

<vd-input v-model="value" placeholder="请输入文本" />

const value = ref('');

展示边框

通过 border 属性展示边框。

<vd-input v-model="value" placeholder="请输入文本" :border="true" />

const value = ref('');

自定义类型

通过 type 属性自定义输入框的类型。

<!-- 文本 -->
<vd-input v-model="value" placeholder="请输入文本" type="number" />
<!-- 密码 -->
<vd-input v-model="value" type="password" placeholder="请输入密码" />
<!-- 电话 -->
<vd-input v-model="value" type="tel" placeholder="请输入电话" />
<!-- 整数 -->
<vd-input v-model="value" type="digit" placeholder="请输入整数" />
<!-- 数字 -->
<vd-input v-model="value" type="number" placeholder="请输入数字" />

const value = ref('');

展示清除按钮

通过 clearable 属性展示清除按钮。

<vd-input v-model="value" placeholder="请输入文本" clearable />

const value = ref('');

展示图标

通过 prefix-icon suffix-icon 属性展示前、后图标。

<vd-input
  v-model="value"
  placeholder="请输入文本"
  prefix-icon="question"
  suffix-icon="coin"
  clearable
/>

const value = ref('');

展示字数限制

已设置 maxlength 时，可通过 show-word-limit 属性展示字数限制。

<vd-input
  v-model="value"
  placeholder="请输入文本"
  maxlength="20"
  clearable
  show-word-limit
/>

const value = ref('');

只读状态

通过 readonly 属性设置只读状态。

<vd-input v-model="value" placeholder="请输入文本" readonly />

const value = ref('');

禁用状态

通过 disabled 属性设置禁用状态。

<vd-input v-model="value" placeholder="请输入文本" disabled />

const value = ref('');

对其方式

通过 align 属性设置对其方式。

<vd-input v-model="value" placeholder="请输入文本" align="left" />
<vd-input v-model="value" placeholder="请输入文本" align="center" />
<vd-input v-model="value" placeholder="请输入文本" align="right" />

const value = ref('');

自定义占位符样式

通过 placeholder-style 属性自定义占位符样式。

<vd-input
  v-model="value"
  placeholder="请输入文本"
  placeholder-style="color: red;"
/>

const value = ref('');

API

Props

参数	说明	类型	默认值
v-model	当前输入的值	string | number	-
type	输入框类型	InputType	text
align	内容对齐方式	InputAlign	'left'
border	是否显示边框	boolean	false
clearable	是否显示清除按钮	boolean	false
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	number	-1
prefix-icon	前缀图标名称	IconsName	-
suffix-icon	后缀图标名称	IconsName	-
show-word-limit	是否显示输入字数限制	boolean	false
placeholder	输入框占位文本	string	-
placeholder-class	占位符样式	ClassValue	-
placeholder-style	占位符样式	StyleValue	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-prefix	点击前缀图标时触发	MouseEvent
click-suffix	点击后缀图标时触发	MouseEvent
clear	清除时触发	-
change	改变时触发	string
input	输入时触发	InputOnInputEvent
focus	聚焦时触发	InputOnFocusEvent
blur	失焦时触发	InputOnBlurEvent
confirm	点击完成按钮时触发	InputOnConfirmEvent

TIP

按钮基于 input 组件，更多 props/events 可前往 uniapp 官网 Input 查看。

Slots

名称	说明
prefix	前缀图标
suffix	后缀图标
clear	清除图标
word-limit	字数限制