Textarea 文本域

基础用法

<vz-textarea v-model="textareaValue" placeholder="请输入" border></vz-textarea>

禁用状态

<vz-textarea v-model="textareaValue" placeholder="不可输入" disabled border></vz-textarea>

只读状态

<vz-textarea v-model="textareaValue" placeholder="不可输入" readonly border></vz-textarea>

背景色

<vz-textarea
  v-model="textareaValue"
  placeholder="请输入"
  background="var(--vz-color-primary-level-9)"
  border
></vz-textarea>

字数限制

<vz-textarea v-model="textareaValue" placeholder="请输入" show-word-limit maxlength="50" border></vz-textarea>

自动增高

<vz-textarea v-model="textareaValue" placeholder="请输入" auto-height border></vz-textarea>

下边框

<vz-textarea v-model="textareaValue" placeholder="请输入" border-bottom></vz-textarea>

无边框

<vz-textarea v-model="textareaValue" placeholder="请输入"></vz-textarea>

Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number	-
autoFocus	自动聚焦，拉起键盘	boolean	false
focus	获取焦点	boolean	false
border	是否显示边框	boolean	false
border-bottom	是否显示下边框	boolean	false
border-color	边框颜色	string	--vz-border-color
background	背景	string	-
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	number / string	140
show-word-limit	是否显示统计字数	boolean	false
interspace	内边距	string / number	20rpx
auto-height	是否自动增高	boolean	false
height	高度，自动增高时不生效	string / number	150rpx
min-height	最小高度	string / number	--vz-height-base
max-height	最大高度	string / number	-
placeholder	输入框为空时占位符	string	-
placeholder-class	指定 placeholder 的样式类	string	input-placeholder
placeholder-style	指定 placeholder 的样式	string	-
confirm-type	设置键盘右下角按钮的文字	done / send / search / next / go / return	done
confirm-hold	点击键盘右下角按钮时是否保持键盘不收起	boolean	false
cursor-spacing	指定光标与键盘的距离	number / string	0
show-confirm-bar	是否显示键盘上方带有“完成”按钮那一栏	boolean	true
adjust-position	键盘弹起时，是否自动上推页面	boolean	true
fixed	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true	boolean	false
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

textarea | uniapp

Events

事件名	说明	参数
input	输入时触发	model-value
confirm	点击键盘完成按钮时触发	model-value
focus	输入框聚焦时触发	-
blur	输入框失去焦点时触发	-
linechange	输入框行数变化时调用	-
keyboardheightchange	键盘高度发生变化的时候触发此事件	-

CSS

变量名	说明	默认值
--vz-textarea-interspace	props.interspace	20rpx
--vz-textarea-background	props.background	-
--vz-textarea-radius	props.radius	--vz-border-radius-base
--vz-textarea-height	props.height	150rpx
--vz-textarea-min-height	props.minHeight	--vz-height-base
--vz-textarea-max-height	props.maxHeight	-
--vz-textarea-border-color	边框颜色	--vz-border-color
--vz-textarea-counter-size	统计字数字体大小	--vz-font-size-small
--vz-textarea-counter-color	统计字数字体颜色	--vz-text-color-thinner
--vz-textarea-disabled-background	禁用时背景	--vz-bg-color-disabled
--vz-textarea-disabled-color	禁用时字体颜色	--vz-text-color-disabled

SCSS

$textarea: (
  "interspace": 20rpx,
  "height": 150rpx,
  "min-height": getCssVar("height", "base"),
  "radius": getCssVar("border-radius", "base"),
  "border-color": getCssVar("border-color"),
  "counter-size": getCssVar("font-size", "small"),
  "counter-color": getCssVar("text-color", "thinner"),
  "disabled-background": getCssVar("bg-color", "disabled"),
  "disabled-color": getCssVar("text-color", "disabled"),
);