我正在尝试在我的Nuxt
/Vue
应用程序中使用NPM包滚动轻松高效,所以我在plugins/
文件中plugins
指定的文件夹中创建了一个名为scroll-ease-efficient.client.js
的文件nuxt.config.js
文件。
以下是文件的内容:
import Vue from 'vue'
import { scrollTo } from 'scroll-ease-efficient'
Vue.use(scrollTo)
然后在我的应用程序中,我只需执行以下操作:
const scrollEle = document.getElementById('element')
scrollTo(scrollEle, 500)
这应该有效,但它什么也没做,我也没有控制台错误。
怎么了?
感谢您的提问。但首先,让我澄清一下。并非所有的 npm 包都打算使用 Vue/Nuxt 插件方法安装。这种方式的常规 npm 包名称通常包含单词 vue/nuxt,如Vuetify
或Vuefire
。
而且scroll-ease-efficient
包既不是 vue 也不是 nuxt 插件。因此,为了使用此包,您可以将该包中的全局 api 添加到 vue 或 nuxt 构造函数中。
import Vue from "vue";
import { scrollTo } from "scroll-ease-efficient";
Vue.prototype.$scrollTo = scrollTo;
现在,您可以通过this.$scrollTo()
访问全局方法
编辑
请查看此演示链接:https://codesandbox.io/s/vue-scroll-ease-efficient-demo-8tqmj