NuxtJS:在页面组件中使用普通JS库(Pickr)
我正在尝试在我的项目中实现一个(特别是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>当我导航到导入这个插件的页面时，我会得到以下错误：
问题1：
我认为之所以会发生这种情况，是因为它试图找到尚未存在的<span class="color-picker></span>。我认为“挂载”是在模板呈现后执行的。我在这里不明白什么？我该怎么解决这个问题？
问题2：
是否有适当的方法使用一个普通的JS库作为插件？我读过这个https://nuxtjs.org/guide/plugins/，但我不清楚这是哪一种情况。显然，这不是一个Vue插件，但是它是一个位于ES6中的node_modules插件。那么，如果我们想从每个页面访问这个插件，我们该如何解决这个问题呢？
问题3：
当我重新启动服务器(CMD+C，npm运行dev服务器和客户端编译OK)并访问http://localhost:3000/dashboard/ageRanges/create时，这个库工作得很好。
如果我重新加载该页面，就会得到前面的错误。
知道为什么吗？
回答 1
Stack Overflow用户
发布于 2020-05-21 13:49:09
看来Picker本身正在访问窗口。因此，即使在服务器端模式下导入也会导致错误。
这是可以解决的，但这很棘手。您基本上需要移动导入到插件，它将只加载在客户端模式。
您可以使用我在下面的答案how to add plugins of ckeditor in nuxt with ssr中提出的相同方法(同样的问题，库正在访问窗口对象)
https://stackoverflow.com/questions/61931768
复制相似问题
腾讯云开发者
