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

jvlzgdj9 于 2023-01-26 发布在 Vue.js

关注(0)|答案(2)|浏览(190)

我想键入输入，如果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

vue.js

来源：https://stackoverflow.com/questions/75224697/vue3-scrollintoview-in-watch

2条答案

按热度按时间

knpiaxh11#

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

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

赞(0）回复(0）举报 2023-01-26

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">

赞(0）回复(0）举报 2023-01-26

我来回答

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

2条答案

相关问题

热门标签

最新问答