Vue 3-在监视中滚动进入视图

jvlzgdj9  于 2023-01-26  发布在  Vue.js
关注(0)|答案(2)|浏览(189)

我想键入输入,如果input的值与"1"匹配,它将滚动到.here,但它不起作用,
我试着创建一个按钮并添加一个handle-click函数,效果很好。
请帮帮我。

<template>
  <button @click="scrollToView">Click to Here</button>
  <input type="text" v-model="searchAddress" />
  <span v-if="matchAddress">OK</span>
  <span class="here" ref="el">Here</span>
</template>

<script setup>
import { ref, computed, watch, nextTick } from "vue";
const searchAddress = ref(null);
const el = ref(null);
const matchAddress = computed(() => {
  return searchAddress.value == 1;
});
function scrollToView() {
  el.value.scrollIntoView({ behavior: "smooth", block: "center" });
  el.value.focus({ preventScroll: true });
}
watch(matchAddress, async (val) => {
  console.log(val);
  if (val) {
    await nextTick();
    scrollToView();
  }
});
</script>

DEMO

knpiaxh1

knpiaxh11#

所以,这似乎是Chrome的一个问题。显然,nextTick()点击太早了。我认为keyup中有一个事件阻止了Chrome将<input>滚动到视图之外。这就是为什么按钮可以工作,但文本输入不能。
如果将其放入setTimeout()中,则可以正常工作:

watch(matchAddress, async (val) => {
  if (val) {
    setTimeout(() => scrollToView());
  }
});
xt0899hw

xt0899hw2#

你可以试试这样的东西。这是普通的JS。在Vue中你只需要把onkeyup(event)改为@keyup($event)window.scrollTo可能需要改为outerComponent.scrollTo。只要在输入中键入"1"。

function checkValue(event) {
  const inputVal = event.currentTarget.value
  const hereDiv = document.querySelector('.here')
  if (inputVal === '1') {
    
    // In Vue you might have to change "window" to the to your outer component ref.
    window.scrollTo({ 
      top: hereDiv.offsetTop,
      behavior: 'smooth'
    })
  }
}
.here {
  width: 50px;
  height: 50px;
  margin-top: 800px;
  background-color: blue;
}
<input type="text" onkeyup="checkValue(event)">
<div class="here">

相关问题