Bläddra i källkod

feat(news-edit): 为 textarea 组件添加 maxlength 和 auto-height 属性,优化长文本输入体验

mcbaiyun 2 veckor sedan
förälder
incheckning
a02107b254

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

@@ -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)
+```

+ 2 - 0
src/pages/doctor/manage/news-edit.vue

@@ -23,6 +23,8 @@
           class="markdown-area"
           :style="textareaStyle"
           placeholder="在此输入 Markdown 内容"
+          maxlength="999999"
+          auto-height="true"
           @input="onInput"
           @focus="onFocus"
         ></textarea>