网站建设与技术团队百度统计网站

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组件 --><textareaclass="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>