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

Question

我在用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)

Answer 1

通常，为了简单起见，您可能希望使用该插件的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()下。