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

相关推荐
_codeOH10 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
英勇无比的消炎药11 小时前
新手必看玩转TinyRobot一定要避开这些坑
前端·vue.js
英勇无比的消炎药11 小时前
别再盲目混用AI组件库和传统组件库差距原来这么大
前端·vue.js
英勇无比的消炎药13 小时前
前端提效神器全新AI组件库TinyRobot改写日常开发模式
前端·vue.js
英勇无比的消炎药13 小时前
前端提效神器TinyRobot
前端·vue.js
CDwenhuohuo13 小时前
uni 背景色渐变 全屏
前端·javascript·vue.js
爱怪笑的小杰杰13 小时前
Vue 项目交付第三方开发,如何隐藏核心 JS 源码?
前端·javascript·vue.js
小二·14 小时前
Vue 3 组合式 API 进阶实战
前端·javascript·vue.js
rising start15 小时前
九、vue3 组件通信:全场景详解
前端·vue.js·typescript
编程技术手记15 小时前
Vue Scoped CSS 与动态创建 DOM 的兼容性问题
前端·css·vue.js