如何在 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()

下

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

How to proper use clipboard.js within Nuxt?

javascript

vue.js

clipboard.js

nuxt.js