textarea
组件是多行文本输入控件。
API
以下是 textarea
组件的 API 介绍:
属性列表
value
/v-model
:输入框的内容。placeholder
:输入框为空时占位符。placeholder-style
:指定 placeholder 的样式。disabled
:是否禁用。maxlength
:最大输入长度,设置为 -1 的时候不限制最大长度。auto-focus
:自动聚焦,拉起键盘。focus
:获取焦点。auto-height
:是否自动增高,设置为 true 时,style 中的 height 不生效。fixed
:如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true。cursor-spacing
:指定光标与键盘的距离。cursor
:光标位置。show-confirm-bar
:是否显示键盘上方带有"完成"按钮那一栏,安卓系统下无效。
事件列表
input
:当键盘输入时,触发 input 事件,event.detail = {value: value}。focus
:输入框聚焦时触发,event.detail = {value, height}。blur
:输入框失去焦点时触发,event.detail = {value}。confirm
:点击完成按钮时触发,event.detail = {value}。
示例
以下是 textarea
组件在页面中的使用示例:
html
<textarea placeholder="请输入内容"
:value="textValue"
@input="inputEvent"
@focus="focusEvent"
@blur="blurEvent"
@confirm="confirmEvent"
auto-height />
JavaScript 部分:
javascript
export default {
data() {
return {
textValue: '' // 初始化文本内容为空
};
},
methods: {
inputEvent: function(event) {
this.textValue = event.detail.value; // 更新文本内容
},
focusEvent: function(event) {
// 输入框聚焦事件处理
},
blurEvent: function(event) {
// 输入框失去焦点事件处理
},
confirmEvent: function(event) {
// 点击完成按钮事件处理
}
}
}
在这个示例中,textarea
组件用于多行文本输入。它会自动增高以适应内容,并且当文本框内的内容发生变化时会触发相应的事件。
更详细的内容请参考最新的 uni-app 官方文档。