ChronicDisease_UniApp/docs/uni-app textarea 内容截断问题与修复.md

uni-app textarea 内容截断问题与修复

问题描述

在 uni-app Vue 3 环境中，编辑页面加载长文本内容时，textarea 组件只显示部分内容，后续内容被截断。

问题原因

uni-app 的 textarea 组件在小程序平台，value 属性默认最大长度为 140 字符。即使数据完整加载，也会在显示时被截断。H5 平台可能不受此限制，但小程序环境会强制截断。

解决方法

在 textarea 标签上添加 maxlength 属性，设置为足够大的值，如 maxlength="999999"，以允许显示完整内容。

<textarea
  v-model="content"
  auto-height="true"
  maxlength="999999"
  placeholder="在此输入 Markdown 内容"
/>

经验教训

• uni-app 组件在不同平台（如小程序、H5）有特定限制，需查阅官方文档确认默认行为。
• 调试时，通过 console.log 检查数据完整性，但显示问题需考虑组件属性限制。
• 对于长文本输入，务必设置 maxlength 以避免平台默认截断。
• 结合 auto-height="true" 可实现动态高度调整，提升用户体验。

相关代码片段

// 数据加载后检查内容长度
console.log('Loaded content length:', content.value.length)
console.log('Assigned content:', content.value)