uni-app 内置组件:Textarea

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

相关推荐
JIngJaneIL12 分钟前
基于Java+ vue智慧医药系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
+VX:Fegn089528 分钟前
计算机毕业设计|基于springboot + vue图书管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Dwzun5 小时前
基于SpringBoot+Vue的二手书籍交易平台系统【附源码+文档+部署视频+讲解)
java·vue.js·spring boot·后端·spring·计算机毕业设计
北辰alk5 小时前
Vue3 事件修饰符深度解析:从基础到高级应用的完整指南
vue.js
北辰alk5 小时前
Vue3 服务端渲染 (SSR) 深度解析:从原理到实践的完整指南
vue.js
一字白首6 小时前
Vue 项目实战,从注册登录到首页开发:接口封装 + 导航守卫 + 拦截器全流程
前端·javascript·vue.js
北辰alk6 小时前
Vue3 组件懒加载深度解析:从原理到极致优化的完整指南
vue.js
JIngJaneIL7 小时前
基于Java + vue干洗店预约洗衣系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
剑小麟7 小时前
vue2项目中安装vant报错的解决办法
vue.js·java-ee·vue
Nan_Shu_6148 小时前
学习:Vue (2)
javascript·vue.js·学习