深入了解uniapptextarea控件

LYHSC • 2025-04-24 06:40 • 编程

uniapptextarea控件是uniapp框架中非常常用的组件之一，在开发中经常会用到。本文将从多个方面对uniapptextarea做详细的阐述。

一、基本用法

uniapptextarea是文本输入框组件，适用于多行文本输入。使用方式非常简单，只需要在template中添加uni-textarea标签即可：


<template>
  <uni-textarea v-model="content"></uni-textarea>
</template>

其中，v-model用于双向绑定文本框的内容，content为所绑定的数据变量名。如果需要设置默认值，可以在data中定义content变量。例如：


<template>
  <uni-textarea v-model="content"></uni-textarea>
</template>
<script>
export default {
  data() {
    return {
      content: "这是默认文本"
    }
  }
}
</script>

二、常用属性

1. value

value属性用于设置文本框中的文本内容，可以通过v-bind进行绑定。例如：


<template>
  <uni-textarea v-model="content" :value="defaultValue"></uni-textarea>
</template>
<script>
export default {
  data() {
    return {
      defaultValue: "这是默认文本",
      content: ""
    }
  }
}
</script>

2. placeholder

placeholder属性用于设置文本框的占位符，在文本框为空时显示灰色提示文本。例如：


<template>
  <uni-textarea v-model="content" placeholder="请输入内容"></uni-textarea>
</template>

3. maxlength

maxlength属性用于设置文本框中输入的最大字符数。例如：


<template>
  <uni-textarea v-model="content" maxlength="50"></uni-textarea>
</template>

4. disabled

disabled属性用于设置文本框是否不可编辑。例如：


<template>
  <uni-textarea v-model="content" disabled></uni-textarea>
</template>

三、使用技巧

1. 自适应高度

默认情况下，uniapptextarea控件的高度为固定值，如果输入的内容超出文本框高度，将无法显示。但我们可以通过以下方式实现文本框自适应高度：


<template>
  <view style="width: 100%;" :class="{ 'textarea-wrapper': true }">
    <uni-textarea v-model="content" :style="{ height: (lineCount + 1) * 36 + 'rpx' }" @focus="onFocus" @blur="onBlur"></uni-textarea>
    <view class="textarea-text" :style="{ visibility: isShow ? 'visible' : 'hidden' }">{{content}}</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      content: "",
      lineCount: 1,
      isShow: false
    }
  },
  methods: {
    onFocus() {
      if (!this.content) {
        this.isShow = true;
      }
    },
    onBlur() {
      this.isShow = false;
    }
  },
  watch: {
    content() {
      const lineCount = this.content.split('\n').length;
      this.lineCount = lineCount > 1 ? lineCount : 2;
    }
  }
}
</script>
<style scoped>
.textarea-wrapper {
  position: relative;
}
.textarea-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 30rpx;
  line-height: 36rpx;
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>

使用以上代码实现文本框自适应高度。其中，通过计算输入内容行数，更新文本框高度，使其能够显示全部内容。

2. 输入校验

可以通过正则表达式校验用户输入内容是否符合要求。例如：校验只允许输入中文和数字，代码如下：


<template>
  <uni-textarea v-model="content" @input="checkInput"></uni-textarea>
</template>
<script>
export default {
  data() {
    return {
      content: ""
    }
  },
  methods: {
    checkInput() {
      this.content = this.content.replace(/[^\u4e00-\u9fa5\d]/g, '');
    }
  }
}
</script>

四、总结

uniapptextarea是非常实用的文本输入框组件，可以帮助我们快速实现多行文本输入。掌握了uniapptextarea的基本用法和常用属性，加上一些技巧，可以更好地提高开发效率。

原创文章，作者：LYHSC，如若转载，请注明出处：https://www.506064.com/n/372160.html