Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
71d894b2 1 parent 593bbc92

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

Inline Side-by-side
Showing 2 changed files with 46 additions and 28 deletions
...@@ -72,7 +72,8 @@ ...@@ -72,7 +72,8 @@
72 </div> 72 </div>
73 <div> 73 <div>
74 <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200" 74 <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
75 - placeholder="请填写您对小朋友的温馨鼓励" show-word-limit /> 75 + placeholder="请填写您对小朋友的温馨鼓励" show-word-limit @focus="focusInput"
76 + @blur="blurInput" />
76 </div> 77 </div>
77 <div style="margin-top: 3rem;"> 78 <div style="margin-top: 3rem;">
78 <my-button type="primary" @on-click="handleAudit('disable')">确定</my-button> 79 <my-button type="primary" @on-click="handleAudit('disable')">确定</my-button>
...@@ -173,6 +174,28 @@ const handleAudit = (status) => { ...@@ -173,6 +174,28 @@ const handleAudit = (status) => {
173 console.error(err); 174 console.error(err);
174 }) 175 })
175 } 176 }
177 +
178 +// 优化处理输入框弹出遮挡问题
179 +let interval = ''
180 +const focusInput = () => {
181 + window.addEventListener("resize", function () {
182 + if (
183 + document.activeElement.tagName === "INPUT" ||
184 + document.activeElement.tagName === "TEXTAREA"
185 + ) {
186 + interval = window.setTimeout(function () {
187 + if ("scrollIntoView" in document.activeElement) {
188 + document.activeElement.scrollIntoView();
189 + } else {
190 + document.activeElement.scrollIntoViewIfNeeded();
191 + }
192 + }, 0);
193 + }
194 + });
195 +}
196 +const blurInput = () => {
197 + clearInterval(interval);
198 +}
176 </script> 199 </script>
177 200
178 <script> 201 <script>
......
1 <template> 1 <template>
2 - <van-popup 2 + <van-popup v-model:show="show" :close-on-click-overlay="false" position="bottom" :style="{ height: '40%' }">
3 - v-model:show="show"
4 - :close-on-click-overlay="false"
5 - position="bottom"
6 - :style="{ height: '40%' }"
7 - >
8 <div class="van-hairline--bottom"> 3 <div class="van-hairline--bottom">
9 <van-row> 4 <van-row>
10 <van-col span="4" /> 5 <van-col span="4" />
...@@ -33,16 +28,9 @@ ...@@ -33,16 +28,9 @@
33 </div> 28 </div>
34 <div> 29 <div>
35 <van-cell-group inset> 30 <van-cell-group inset>
36 - <van-field 31 + <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
37 - v-model="message" 32 + :placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'" show-word-limit @focus="focusInput"
38 - rows="2" 33 + @blur="blurInput" />
39 - autosize
40 - label=""
41 - type="textarea"
42 - maxlength="200"
43 - :placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'"
44 - show-word-limit
45 - />
46 </van-cell-group> 34 </van-cell-group>
47 </div> 35 </div>
48 </van-popup> 36 </van-popup>
...@@ -84,20 +72,27 @@ const submitComment = () => { ...@@ -84,20 +72,27 @@ const submitComment = () => {
84 watch(() => props.showPopup, (v) => { 72 watch(() => props.showPopup, (v) => {
85 show.value = v 73 show.value = v
86 }) 74 })
87 -</script>
88 75
89 -<script> 76 +// 优化处理输入框弹出遮挡问题
90 -export default { 77 +let interval = ''
91 - data () { 78 +const focusInput = () => {
92 - return { 79 + window.addEventListener("resize", function () {
80 + if (
81 + document.activeElement.tagName === "INPUT" ||
82 + document.activeElement.tagName === "TEXTAREA"
83 + ) {
84 + interval = window.setTimeout(function () {
85 + if ("scrollIntoView" in document.activeElement) {
86 + document.activeElement.scrollIntoView();
87 + } else {
88 + document.activeElement.scrollIntoViewIfNeeded();
93 } 89 }
94 - }, 90 + }, 0);
95 - mounted () {
96 - },
97 - watch: {
98 - },
99 - methods: {
100 } 91 }
92 + });
93 +}
94 +const blurInput = () => {
95 + clearInterval(interval);
101 } 96 }
102 </script> 97 </script>
103 98
......