style: textarea修改为随高度变化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user