|
|
@@ -0,0 +1,32 @@
|
|
|
+# uni-app textarea 内容截断问题与修复
|
|
|
+
|
|
|
+## 问题描述
|
|
|
+在 uni-app Vue 3 环境中,编辑页面加载长文本内容时,`textarea` 组件只显示部分内容,后续内容被截断。
|
|
|
+
|
|
|
+## 问题原因
|
|
|
+uni-app 的 `textarea` 组件在小程序平台,`value` 属性默认最大长度为 140 字符。即使数据完整加载,也会在显示时被截断。H5 平台可能不受此限制,但小程序环境会强制截断。
|
|
|
+
|
|
|
+## 解决方法
|
|
|
+在 `textarea` 标签上添加 `maxlength` 属性,设置为足够大的值,如 `maxlength="999999"`,以允许显示完整内容。
|
|
|
+
|
|
|
+```vue
|
|
|
+<textarea
|
|
|
+ v-model="content"
|
|
|
+ auto-height="true"
|
|
|
+ maxlength="999999"
|
|
|
+ placeholder="在此输入 Markdown 内容"
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+## 经验教训
|
|
|
+- uni-app 组件在不同平台(如小程序、H5)有特定限制,需查阅官方文档确认默认行为。
|
|
|
+- 调试时,通过 `console.log` 检查数据完整性,但显示问题需考虑组件属性限制。
|
|
|
+- 对于长文本输入,务必设置 `maxlength` 以避免平台默认截断。
|
|
|
+- 结合 `auto-height="true"` 可实现动态高度调整,提升用户体验。
|
|
|
+
|
|
|
+## 相关代码片段
|
|
|
+```typescript
|
|
|
+// 数据加载后检查内容长度
|
|
|
+console.log('Loaded content length:', content.value.length)
|
|
|
+console.log('Assigned content:', content.value)
|
|
|
+```
|