深入了解uniapptextarea控件

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的基本用法和常用屬性，加上一些技巧，可以更好地提高開發效率。