Procházet zdrojové kódy

feat(ImageOrUrlInput): 添加普通文本输入功能

- 新增普通文本标签页,支持文本内容输入
- 添加textValue响应式变量存储文本值
- 实现handleTextInput方法处理文本输入事件
- 在标签页切换时重置对应的数据状态
- 优化watch逻辑,根据输入类型自动切换标签页
- 添加文本容器样式
zhou před 2 týdny
rodič
revize
cc33f767f0
1 změnil soubory, kde provedl 23 přidání a 1 odebrání
  1. 23 1
      src/components/ImageOrUrlInput/index.vue

+ 23 - 1
src/components/ImageOrUrlInput/index.vue

@@ -48,6 +48,12 @@
           </div>
         </div>
       </el-tab-pane>
+
+      <el-tab-pane label="普通文本" name="text">
+        <div class="text-container">
+          <el-input v-model="textValue" type="textarea" :rows="3" placeholder="请输入文本内容" @input="handleTextInput" />
+        </div>
+      </el-tab-pane>
     </el-tabs>
 
     <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
@@ -98,6 +104,7 @@ const dialogImageUrl = ref('');
 const dialogVisible = ref(false);
 const urlValue = ref('');
 const isValidUrl = ref(false);
+const textValue = ref('');
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 const uploadImgUrl = ref(getUploadUrl('oss'));
@@ -138,7 +145,11 @@ const handleUrlBlur = () => {
   }
 };
 
-// 移除图片加载错误处理函数,因为不再需要预览图片
+// 处理文本输入
+const handleTextInput = (value: string) => {
+  textValue.value = value;
+  emit('update:modelValue', value);
+};
 
 // 处理标签页切换
 const handleTabClick = () => {
@@ -146,6 +157,8 @@ const handleTabClick = () => {
   if (activeTab.value === 'url') {
     urlValue.value = '';
     isValidUrl.value = false;
+  } else if (activeTab.value === 'text') {
+    textValue.value = '';
   }
 };
 
@@ -178,11 +191,16 @@ watch(
         if (/^\d+$/.test(val)) {
           activeTab.value = 'upload';
           loadOssData(val);
+        } else {
+          // 普通文本
+          activeTab.value = 'text';
+          textValue.value = val;
         }
       }
     } else {
       urlValue.value = '';
       isValidUrl.value = false;
+      textValue.value = '';
       fileList.value = [];
     }
   },
@@ -315,6 +333,10 @@ const listToString = (list: any[], separator?: string) => {
       margin-top: 10px;
     }
   }
+
+  .text-container {
+    margin-top: 5px;
+  }
 }
 
 // .el-upload--picture-card 控制加号部分