Input 输入框

基础用法

<vz-input v-model="inputValue" placeholder="请输入" border></vz-input>

一键清空

<vz-input v-model="inputValue" placeholder="请输入" clearable border></vz-input>

密码框

<vz-input v-model="inputValue" placeholder="请输入" password password-showable border></vz-input>

只读状态

<vz-input v-model="inputValue" placeholder="不可输入，可点击" readonly border></vz-input>

禁用状态

<vz-input v-model="inputValue" placeholder="不可输入，不可点击" disabled border></vz-input>

前后图标

<vz-input v-model="inputValue" placeholder="前置图标" prefix-icon="vz-icon-search" border></vz-input>

<vz-input v-model="inputValue" placeholder="后置图标" suffix-icon="vz-icon-arrow-right" border></vz-input>

前后插槽

<vz-input v-model="inputValue" placeholder="前置插槽" border>
  <template #prefix>
    <text>https://</text>
  </template>
</vz-input>

<vz-input v-model="inputValue" placeholder="后置插槽" border>
  <template #suffix>
    <text>@email.com</text>
  </template>
</vz-input>

对齐方式

<vz-input v-model="inputValue" placeholder="居中对齐" align="center" border></vz-input>

<vz-input v-model="inputValue" placeholder="右对齐" align="right" border></vz-input>

字数限制

<vz-input v-model="inputValue" placeholder="请输入" maxlength="10" show-word-limit border></vz-input>

圆角

<vz-input v-model="inputValue" placeholder="请输入" round border></vz-input>

方角

<vz-input v-model="inputValue" placeholder="请输入" square border></vz-input>

下边框

<vz-input v-model="inputValue" placeholder="请输入" border-bottom></vz-input>

无边框

<vz-input v-model="inputValue" placeholder="请输入"></vz-input>

自定义颜色

<vz-input
  v-model="inputValue"
  placeholder="请输入"
  placeholder-style="color: var(--vz-color-primary-level-7)"
  background="var(--vz-color-primary-level-9)"
  text-color="var(--vz-color-primary)"
  icon-color="var(--vz-color-primary-level-5)"
  prefix-icon="vz-icon-search"
  suffix-icon="vz-icon-arrow-right"
></vz-input>

Props

属性名	说明	类型	默认值
v-model:model-value	绑定的值	string / number	-
type	类型	text / password / number / idcard / digit / safe-password / nickname	text
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
focus	获取焦点	boolean	false
px	左右边距	string / number	20rpx
height	高度	string / number	--vz-height-base
background	背景	string	-
border	是否显示边框	boolean	false
border-bottom	是否显示下边框	boolean	false
border-color	边框颜色	string	--vz-border-color
square	是否为方角按钮	boolean	false
round	是否为圆角按钮	boolean	false
text-align	字体对齐方式	left / center / right	left
text-size	字体大小	string / number	inherit
text-color	字体颜色	string	inherit
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	number / string	140
show-word-limit	是否显示统计字数	boolean	false
prefix-icon	前置图标	string	-
suffix-icon	后置图标	string	-
icon-size	图标大小	string / number	--vz-font-size-base
icon-color	图标颜色	string	--vz-color-info
placeholder	输入框为空时占位符	string	-
placeholder-class	指定 placeholder 的样式类	string	input-placeholder
placeholder-style	指定 placeholder 的样式	string	-
confirm-type	设置键盘右下角按钮的文字，仅在 type="text" 时生效	done/ send / search / next / go	done
confirm-hold	点击键盘右下角按钮时是否保持键盘不收起	boolean	false
cursor-spacing	指定光标与键盘的距离	number / string	0
adjust-position	键盘弹起时，是否自动上推页面	boolean	true
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.StyleValue	-

input | uniapp

Events

事件名	说明	参数
input	输入时触发	model-value
confirm	点击键盘完成按钮时触发	model-value
focus	输入框聚焦时触发	-
blur	输入框失去焦点时触发	-
clear	点击清空图标时触发	-
click	只读状态时点击触发	-
prefix-icon	点击前置图标时触发	-
suffix-icon	点击后置图标时触发	-
keyboardheightchange	键盘高度发生变化的时候触发	-
nicknamereview	用户昵称审核完毕后触发	-

Slots

插槽名	说明
prefix	前置插槽
suffix	后置插槽

CSS

变量名	说明	默认值
--vz-input-px	props.px	20rpx
--vz-input-height	props.height	--vz-height-base
--vz-input-background	props.background	-
--vz-input-border-color	props.borderColor	--vz-border-color
--vz-input-radius	圆角	--vz-border-radius-base
--vz-input-text-align	props.textAlign	left
--vz-input-text-size	props.textSize	inherit
--vz-input-text-color	props.textColor	inherit
--vz-input-icon-size	props.iconSize	--vz-font-size-base
--vz-input-icon-color	props.iconColor	--vz-color-info
--vz-input-counter-size	统计字数字体大小	--vz-font-size-small
--vz-input-counter-color	统计字数字体颜色	--vz-text-color-thinner
--vz-input-disabled-background	禁用时背景	--vz-bg-color-disabled
--vz-input-disabled-color	禁用时字体颜色	--vz-text-color-disabled
--vz-input-slot-color	插槽字体颜色	--vz-color-info
--vz-input-icon-px	图标左右边距	16rpx
--vz-input-prefix-ml	前置内容 margin-left。border: true 时	calc(-1 * 16rpx)
--vz-input-suffix-mr	后置内容 margin-right。border: true 时	calc(-1 * 16rpx)

SCSS

$input: (
  "px": 30rpx,
  "height": var(--vz-height-base),
  "border-color": var(--vz-border-color),
  "radius": var(--vz-border-radius-base),
  "icon-px": var(--vz-gap-large),
  "icon-size": var(--vz-font-size-large),
  "icon-color": var(--vz-color-info),
  "counter-size": var(--vz-font-size-small),
  "counter-color": var(--vz-text-color-thinner),
  "disabled-color": var(--vz-input-disabled-color),
  "disabled-background": var(--vz-input-disabled-background),
);