hookehuyr

✨ feat(输入框组件): 优化处理输入框弹出遮挡问题

......@@ -72,7 +72,8 @@
</div>
<div>
<van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
placeholder="请填写您对小朋友的温馨鼓励" show-word-limit @focus="focusInput"
@blur="blurInput" />
</div>
<div style="margin-top: 3rem;">
<my-button type="primary" @on-click="handleAudit('disable')">确定</my-button>
......@@ -173,6 +174,28 @@ const handleAudit = (status) => {
console.error(err);
})
}
// 优化处理输入框弹出遮挡问题
let interval = ''
const focusInput = () => {
window.addEventListener("resize", function () {
if (
document.activeElement.tagName === "INPUT" ||
document.activeElement.tagName === "TEXTAREA"
) {
interval = window.setTimeout(function () {
if ("scrollIntoView" in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});
}
const blurInput = () => {
clearInterval(interval);
}
</script>
<script>
......
<template>
<van-popup
v-model:show="show"
:close-on-click-overlay="false"
position="bottom"
:style="{ height: '40%' }"
>
<van-popup v-model:show="show" :close-on-click-overlay="false" position="bottom" :style="{ height: '40%' }">
<div class="van-hairline--bottom">
<van-row>
<van-col span="4" />
......@@ -33,16 +28,9 @@
</div>
<div>
<van-cell-group inset>
<van-field
v-model="message"
rows="2"
autosize
label=""
type="textarea"
maxlength="200"
:placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'"
show-word-limit
/>
<van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
:placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'" show-word-limit @focus="focusInput"
@blur="blurInput" />
</van-cell-group>
</div>
</van-popup>
......@@ -84,20 +72,27 @@ const submitComment = () => {
watch(() => props.showPopup, (v) => {
show.value = v
})
</script>
<script>
export default {
data () {
return {
// 优化处理输入框弹出遮挡问题
let interval = ''
const focusInput = () => {
window.addEventListener("resize", function () {
if (
document.activeElement.tagName === "INPUT" ||
document.activeElement.tagName === "TEXTAREA"
) {
interval = window.setTimeout(function () {
if ("scrollIntoView" in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
},
mounted () {
},
watch: {
},
methods: {
}
});
}
const blurInput = () => {
clearInterval(interval);
}
</script>
......