style: textarea修改为随高度变化

src/component/home/tools/toProduct/index.vue

@@ -166,13 +166,13 @@
                     @keydown.enter.prevent="getPrductimg()"
                     v-model="searchName[productimgMenu.value]"
                   ></textarea>
+                  <div class="asistant-btn" @click="handleClickAssistBtn">
+                    <i class="fi fi-bs-magic-wand asistant-icon"></i>
+                    <span>{{ $t('ProductImg.PromptAssit') }}</span>
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="asistant-btn" @click="handleClickAssistBtn">
-              <i class="fi fi-bs-magic-wand asistant-icon"></i>
-              <span>{{ $t('ProductImg.PromptAssit') }}</span>
-            </div>
           </div>
           <div class="productImg_content_item_generate_btn input_border">
             <div class="generage_btn_box">
@@ -1036,17 +1036,21 @@ export default defineComponent({
       })
     }
     const ifMaximumLength = async () => {
-      await nextTick()
+      // await nextTick()
+      // let textarea = productImgData.textarea
+      // const scrollTop = textarea.scrollTop
+      // // 2. 计算单行高度
+      // const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
+      // // 3. 重置高度为1行
+      // textarea.style.height = lineHeight + 'px'
+      // // 4. 计算实际需要的高度
+      // const newHeight = Math.max(lineHeight, textarea.scrollHeight)
+      // textarea.style.height = newHeight + 'px'
+      // textarea.scrollTop = scrollTop
+      // 随着输入内容自动调整高度
       let textarea = productImgData.textarea
-      const scrollTop = textarea.scrollTop
+      textarea.style.height = 'auto'
-      // 2. 计算单行高度
+      textarea.style.height = textarea.scrollHeight + 'px'
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
-      // 3. 重置高度为1行
-      textarea.style.height = lineHeight + 'px'
-      // 4. 计算实际需要的高度
-      const newHeight = Math.max(lineHeight, textarea.scrollHeight)
-      textarea.style.height = newHeight + 'px'
-      textarea.scrollTop = scrollTop
     }
     const openSpeed = () => {
       speed.speedState = !speed.speedState
@@ -1562,19 +1566,18 @@ export default defineComponent({
   .input_border {
     padding-bottom: 0;
     .input_box {
-      .input_box_btnBox .textarea {
+      .input_box_btnBox {
-        min-height: 12.7rem;
+        position: relative;
+        .textarea {
+          min-height: 12.7rem;
+          max-height: none;
+        }
       }
     }
   }
-  .input_box_btnBox {
-    padding-bottom: 4rem;
-  }
   .asistant-btn {
-    // width: 9rem;
-    padding: 0.45rem 0.6rem;
     height: 2.3rem;
-    line-height: 2.3rem;
+    padding: 0 0.6rem;
     font-size: 1rem;
     font-weight: 400;
     color: #313131;
@@ -1591,6 +1594,9 @@ export default defineComponent({
     cursor: pointer;
     .asistant-icon {
       font-size: 1rem;
+      margin-right: 0;
+      width: initial;
+      // margin-top: -0.2rem;
     }
   }
 }