style: textarea修改为随高度变化

This commit is contained in:
zhangyh
2025-11-12 14:43:29 +08:00
parent cca2642bf0
commit b3432683a7

View File

@@ -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
// 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
textarea.style.height = 'auto'
textarea.style.height = textarea.scrollHeight + 'px'
}
const openSpeed = () => {
speed.speedState = !speed.speedState
@@ -1562,19 +1566,18 @@ export default defineComponent({
.input_border {
padding-bottom: 0;
.input_box {
.input_box_btnBox .textarea {
min-height: 12.7rem;
.input_box_btnBox {
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;
}
}
}