Javascript 如何在Nuxt中正确使用clipboard.js？

我正在用它制作我的宠物项目。我想实现的一个小功能是将一些动态数据复制到剪贴板。对于这样的任务，我总是使用

clipboard.js

，但从未在

Nuxt.js

中使用过

t我写的解决方案是有效的，但我不确定我是否正确使用了它

复制
...
一些动态生成的文本

从“剪贴板”导入剪贴板JS；
导出默认{//组件
数据（）{
返回{
剪贴板：null，//用于存储剪贴板实例的数据属性
}
},
安装的（）{
this.clipboard=new ClipboardJS（'.copyToClipboardBtn'）；
},
销毁（）{
如果（this.clipboard）{
这个.clipboard.destroy（）；
}
},
}

因此，我的问题是如何在Nuxt中正确使用这样的库

---

我通常使用

Nuxt.js 2.14.7

和

clipboard.js 2.0.6

（）

，为了简单起见，您需要使用此插件的vue包装，然后将其作为Nuxt插件导入

例如，使用此包装器：

plugins/vueClipboard2.js

从“Vue”导入Vue
从“vue-clipboard2”导入VueClipboard
Vue.use（VueClipboard）

numxt.config.js

导出默认值{
//更多的配置文件
插件：[
{src:'~/plugins/vueClipboard2.js'，模式：'client'}，
]
}

---

然后您可以全局使用它，通常在

this.$something（）

下。通常，为了简单起见，您希望使用此插件的vue包装，然后将其作为nuxt插件导入

例如，使用此包装器：

plugins/vueClipboard2.js

从“Vue”导入Vue
从“vue-clipboard2”导入VueClipboard
Vue.use（VueClipboard）

numxt.config.js

导出默认值{
//更多的配置文件
插件：[
{src:'~/plugins/vueClipboard2.js'，模式：'client'}，
]
}

---

然后您就可以全局使用它，通常是在

this.$something（）

我刚刚添加到我的项目

https://github.com/webcore-it/nuxt-clipboard2

它是nuxt的vueclipboard的包装。而且它更方便，需要的代码更少。所以我接受你的回答，谢谢。我刚刚在我的项目中加入了

https://github.com/webcore-it/nuxt-clipboard2

它是nuxt的vueclipboard的包装。而且它更方便，需要的代码更少。所以我接受你的回答，谢谢