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

问题描述

我正在使用 Nuxt.js 制作我的宠物项目。我想要实现的小功能之一是将一些动态数据复制到剪贴板。对于此类任务，我一直使用 clipboard.js，但从未在 Nuxt.js 内使用。

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

<button class="copyToClipboardBtn" data-clipboard-target="#output">copy</button>
...
<textarea id="output">some dynamically generated text</textarea>

import ClipboardJS from "clipboard";

export default { // component
  data() {
    return {
      clipboard: null,// data-property for storing clipboard instance
    }
  },mounted() {
    this.clipboard = new ClipboardJS('.copyToClipboardBtn');
  },destroyed() {
    if ( this.clipboard ) {
      this.clipboard.destroy();
    }
  },}

那么，我的问题是如何在 Nuxt 中正确使用这样的库？

我正在使用 Nuxt.js 2.14.7 和 clipboard.js 2.0.6 (https://github.com/zenorocha/clipboard.js)

解决方法

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

例如使用这个包装器： https://github.com/Inndy/vue-clipboard2

plugins/vueClipboard2.js

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

nuxt.config.js

export default {
  // Some more config stuff
  plugins: [
    { src: '~/plugins/vueClipboard2.js',mode: 'client' },]
}

然后你就可以全局使用它了，通常在this.$something()