uniapp ＜textarea＞组件的踩坑

1、ios真机上，textarea输入时会触发页面其他点击事件，

解决方法：把textarea封装成基础组件，绕过这个bug。

2、使用auto-height属性，安卓真机上，会导致textarea高度异常，
官方人员解释：textarea 的 auto-height 必须要在屏才能计算高度，先展示再赋值。

贴上微信社区的帖子：
https://developers.weixin.qq.com/community/develop/doc/000648f7424528e8f6de0dd4c5fc00

解决办法：把textarea封装成基础组件，dom元素切换时，通过v-if显示隐藏，触发组件onMounted，延迟auto-height赋值。

最后贴上封装的基础组件，供大家参考：

<template>
  <!-- textarea组件 -->
  <textarea
    class="input"
    v-model="inputValue"
    rows="1"
    :placeholder="placeholder"
    :placeholder-style="placeholderStyle"
    :maxlength="maxlength"
    :disabled="disabled"
    :auto-height="autoHeight"
    @input="handleInput"
  />
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { getClientPlatform } from '@/utils/clientEnv';

/** props-组件属性 */
const props = defineProps({
  // 值
  value: {
    type: String,
    default: ''
  },
  // 提示语
  placeholder: {
    type: String,
    default: '请输入'
  },
  // 提示语样式
  placeholderStyle: {
    type: String,
    default: ''
  },
  // 最大长度
  maxlength: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
});

/** emits-组件事件 */
const emits = defineEmits(['update:value']);

let inputValue = ref('');

let autoHeight = ref(false);

let platform = getClientPlatform();

/** 生命周期 */
onMounted(() => {
  if (platform === 'ios') {
    console.log('platform=>', 'ios');
    autoHeight.value = true;
  } else {
    console.log('platform=>', 'android');
    // 安卓真机下，textarea高度会异常，官方人员解释：textarea在屏时，autoHeight属性才能计算高度，进行延迟赋值
    setTimeout(() => {
      autoHeight.value = true;
    }, 10);
  }
});

watch(
  () => props.value,
  (newVal) => {
    inputValue.value = newVal;
  },
  {
    immediate: true
  }
)

// 输入时触发
function handleInput(ev) {
  const { value } = ev.detail;
  emits('update:value', value);
  emits('change', value);
}

</script>

<style lang='scss' scoped>
.input {
  padding: 0;
  width: 100%;
  min-height: 32rpx;
  height: auto;
  font-size: 26rpx;
  color: #333333;
  text-align: right;
}
</style>