【发布时间】：2020-05-21 09:52:36
【问题描述】：
我正在尝试在我的 NuxtJS 项目中实现 vanilla JS 库（特别是 Pickr [https://simonwep.github.io/pickr]）。
我使用 NPM 安装它：
npm install @simonwep/pickr
在我的 NuxtJS create.vue 页面中，我执行以下操作：
<template>
<div>
..other HTML elements..
<span class="color-picker"></span>
..other HTML elements..
</div>
</template>
<script>
import '@simonwep/pickr/dist/themes/classic.min.css';
import Pickr from '@simonwep/pickr'
export default {
mounted() {
// code below is taken from Github
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano'
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
}
}
</script>
当我导航到导入此插件的页面时，我收到以下错误：
问题一：
我认为这是因为它试图找到尚不存在的<span class="color-picker></span>。我认为“安装”是在模板渲染后执行的。我在这里不明白什么？我该如何解决？
问题 2：
有没有合适的方式使用原生 JS 库作为插件？我读了这个https://nuxtjs.org/guide/plugins/，但我不清楚这是哪种情况。显然，这不是一个 Vue 插件，而是一个位于 node_modules 中的 ES6 插件。那么，如果我们想从每个页面访问这个插件，我们该如何解决呢？
问题 3：
当我重新启动服务器（CMD+C，npm run dev [服务器和客户端都编译OK]）并访问http://localhost:3000/dashboard/ageRanges/create，库工作正常。
如果我重新加载该页面，我会收到上一个错误。
知道为什么吗？
【问题讨论】：
-
我尝试用那个包创建一个代码沙箱，但它只是把沙箱弄乱了。但你可以尝试的东西是。 1. 使用
$ref代替el而不是类，不确定这是否有帮助但需要考虑。 2. 使用全局 mixin，这将允许您在任何地方引用this.Pickr。 -
来自服务器的 Stacktrace 可能会有所帮助。看看什么参考给出了错误。无论如何，当元素已经存在时，确实会调用mounted()。正如上面评论中提到的那样，仅通过类引用并不是一个好主意。我建议使用 $el 来获取组件根目录（最好单独包装pickr来拥有组件，尽管您可以使用 this.$el.querySelector('.color-picker')
-
@farincz 尝试在我的方法中使用 this.$el.querySelector('.color-picker') ，它可以工作，但是当我重新加载页面时，我再次遇到相同的错误（500 referenceError）和“未定义窗口”。我还使用旧语法（不是箭头函数）来确保调用“this”并且仍然是同样的问题。
-
如果我注释掉导入 pickr css 和 js 文件，并使用 console.log(this.$el.querySelector('.color-picker')) 那么我不会收到错误即使我刷新页面。所以重新加载页面并再次导入css/js时出现问题..这可能吗？
标签： javascript vue.js nuxt.js