Saya mempunyai pautan penghala dalam tajuk laman web saya yang apabila diklik membawa saya ke halaman /registration
yang mempunyai borang di atasnya. Apa yang saya ingin capai ialah apabila diklik ia menatal ke borang pendaftaran menggunakan pemalam vueScrollTo.
Ia berfungsi sekarang, tetapi bukan 100% seperti yang saya mahukan. Buat masa ini, apabila tidak berada di halaman /registration
页面上并单击时,它会完美滚动到表单,但是当我在 /registration
dan mengklik, ia menatal ke borang dengan sempurna, tetapi apabila saya berada di halaman
Cuba untuk menatal ke elemen yang tiada pada halaman: undefined
Saya percaya ini berlaku kerana saya mencetuskan acara semasa kitaran hayat yang dipasang. Adakah terdapat penyelesaian yang lebih baik untuk menjadikannya berfungsi?
站点标头组件
<template> <router-link to="/registration" class="nav-row--primary__button" @click.native="scrollToRegForm()" > Sign up </router-link> </template> <script> export default { mounted() { if (window.location.href.indexOf("/registration") > 0) { const regForm = document.getElementById("regForm"); setTimeout(() => this.scrollToRegForm(regForm), 1); } }, methods: { scrollToRegForm(element) { VueScrollTo.scrollTo(element, 1000); } } }
注册页面组件
<div class="container--content spacing-ie" id="regForm"> <RegistrationForm /> </div>🎜
使用 setTimeout:
}
Mula-mula anda perlu menambah konfigurasi berikut dalam
yarn中添加vue-scrollto
,然后在nuxt.config.js
Kemudian, templat ini harus menyelesaikan masalah
Cuba melakukan ini dari halaman lain, ia berfungsi dengan baik, tidak perlu memanggil
vue-scrollto
,只需使用简单的<nuxt-link>
dari halaman ini untuk bergerak.Halaman dokumentasi ini boleh membantu anda memahami
$refs
: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements