fix(textarea): 修复readonly时换行符的显示问题（#2566） (#2583)

jdf2e · Oct 7, 2023 · 35eaf8d · 35eaf8d
1 parent 9cd9bf3
commit 35eaf8d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/nutui-taro-demo/project.private.config.json b/packages/nutui-taro-demo/project.private.config.json
@@ -65,4 +65,4 @@
   },
   "projectname": "vue4.x",
   "libVersion": "2.27.1"
-}
+}
diff --git a/src/packages/__VUE/textarea/index.taro.vue b/src/packages/__VUE/textarea/index.taro.vue
@@ -1,8 +1,10 @@
 <template>
   <view :class="classes">
-    <view v-if="readonly" class="nut-textarea__textarea nut-textarea__textarea__readonly">
-      {{ modelValue }}
-    </view>
+    <rich-text
+      v-if="readonly && env !== 'WEB'"
+      class="nut-textarea__textarea nut-textarea__textarea__readonly"
+      :nodes="readonlyValue"
+    ></rich-text>
     <textarea
       v-else
       ref="textareaRef"
@@ -112,6 +114,10 @@ export default create({
       width: '0'
     });
 
+    const readonlyValue = computed(() => {
+      return props.modelValue.replace(/\\n/g, '<br/>');
+    });
+
     const emitChange = (value: string, event: Event) => {
       if (props.maxLength && value.length > Number(props.maxLength)) {
         value = value.substring(0, Number(props.maxLength));
@@ -281,7 +287,8 @@ export default create({
       translate,
       copyTxtStyle,
       startComposing,
-      endComposing
+      endComposing,
+      readonlyValue
     };
   }
 });