Vue 3中如何实现滚动到指定元素的变量?
P粉060528326
2023-08-28 20:17:07
<p>我在纯JavaScript中有以下函数来滚动到一个元素,我想将这段代码转换为Vue 3。</p>
<pre class="brush:php;toolbar:false;">var source = ''
function showScrollInto(currentLocation, toLocation) {
source = currentLocation // 在隐藏部分后返回的位置
document.getElementById(toLocation).style.display = 'block'
document.getElementById(toLocation).scrollIntoView()
}</pre>
<p>并返回到原始位置:</p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre>
<p>在点击按钮时调用showScrollInto:</p>
<pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre>
<p>现在我将该函数转换为一个方法并尝试:</p>
<pre class="brush:php;toolbar:false;">import { ref } from "vue"
var source = ""
const toLocation = ref('Vue.js')
export default {
name: "App",
data() {
return {
hideAlleClubs: true,
hideIkWilKennismaken: true,
hideAlleLocaties: true,
hideMeerOverKegelen: true,
hideInteresse: true
}
},
methods: {
showScrollInto(event, currentLocation, toLocation) {
source = currentLocation // 在隐藏部分后返回的位置
this.hideInteresse = false
this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
// document.getElementById(toLocation).style.display = 'block'
// document.getElementById(toLocation).scrollIntoView()
}
}
}</pre>
<p>通过点击按钮调用showScrollInto:</p>
<pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></pre>
<p>要滚动到的元素如下:</p>
<pre class="brush:php;toolbar:false;"><section class = "top-level-section" v-show="!hideInteresse" ref="interesse"></pre>
<p>传递变量到方法中是可以的,但我无法弄清楚如何滚动到一个位置,其中位置是一个变量。</p>
<p>this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) 可以用于滚动到id为'interesse'的元素,但我不知道如何将该元素名称转换为一个变量。
此外,我了解到this.$refs不是Vue 3的表示法,应该转换为类似ref('value')的形式,但我不知道如何做到这一点。</p>
首先,阅读Vue的文档关于模板引用的部分。页面左上角有一个切换按钮,可以在选项API和组合API语法之间切换。
使用变量引用引用取决于您使用的Vue版本和/或语法。
Vue 2 / 选项API
变量应该是与元素上的ref匹配的字符串
Vue 3 / 组合API
变量应该被赋值为
ref()
(需要导入)。常量的名称应该与元素上的ref名称匹配选项API和组合API不应混合使用,所以只使用一种语法。
在这两种情况下,您可以有多个具有相同ref名称的元素,此时Vue将创建一个包含所有相同名称ref的数组,因此要访问特定的元素,您还需要使用索引。
以下是一些简化的示例。希望它们能解决您的剩余问题,并且您可以根据需要进行修改。
选项API codesandbox示例
组合API codesandbox示例