使用导航器 API 复制链接值在 Vue 中不起作用

Question

在 vue.js 应用程序中，我想单击一个链接并将其值复制到剪贴板，但每次单击时都会出现此错误-

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: navigator.clipboard is undefined"

这是我的代码-

<a @click.prevent="copyEmailLink" href="#" ref="emailLink">[email protected]</a>

async copyEmailLink() {
  console.log(this.$refs.emailLink.textContent)
  await navigator.clipboard.writeText(this.$ref.emailLink.textContent);
  await alert("Copied!");
},

1. 这是怎么回事？是因为 http:// 还是 https://？
2. 如何实现点击链接，将值复制到剪贴板？

提前致谢

Answer 1

我测试了什么-

重现你的例子后，我没有收到像你这样的警告信息，而是收到了另一条错误信息。如果你将运行下面的演示（这是使用导航器剪贴板 API 的正确方法之一），你应该会看到这样的错误-

The Clipboard API has been blocked because of a permissions policy applied to the current document.

new Vue({
  el: "#app",
  methods: {
    copyEmailLink() {
  navigator.clipboard.writeText(this.$refs.emailLink.textContent).then(function() {
        console.log('Copied!');
      }, function(e) {
        console.log(e.message)
      });
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a @click.prevent="copyEmailLink" href="#" ref="emailLink">[email protected]</a>
</div>

文档里都写了什么-

阅读文档后，我发现了这个-

使用异步剪贴板读写方法需要 用户授予网站或应用程序访问剪贴板的权限。 此权限必须使用 “剪贴板读取”和/或“剪贴板写入”权限。

Github 问题建议什么-

我还发现了一个相关的GitHub问题这表明-

您可以使用

Document.execCommand()

但因为这已被弃用并且 今天写的任何东西都应该使用 much 更好的剪贴板 API。

我的建议-

有很多 NPM 包可以很容易地完成这项工作。因此，您可以尝试使用其中一个 NPM 剪贴板包，而不是使用此导航器 API。

这里有几个-

1. https://www.npmjs.com/package/clipboard
2. https://www.npmjs.com/package/copy-to-clipboard
3. https://www.npmjs.com/package/vue-clipboard2（我目前正在使用这个。）