uni-app 内置组件：Textarea

有问题请咨询gpt2023-11-18 8:07

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 官方文档。