vue使用vue-clipboard2实现复制功能遇到的问题

最新推荐文章于 2025-09-03 11:06:48 发布

原创最新推荐文章于 2025-09-03 11:06:48 发布 · 6k 阅读

2 ·

CC 4.0 BY-SA版权

vue使用vue-clipboard2实现复制功能遇到的问题

今天遇到一个功能点需要点击table获取id再通过id获取url，然后复制这个url，然后尝试了各种方法都没有实现。第一个似的就是安装vue-clipboard2，但是搜到的都是很相似的的文章，但是自己试了完全没效果。
好在去了官方文档看了https://www.npmjs.com/package/vue-clipboard2
总算知道没效果的原因了
在这里插入图片描述
翻译：
是的，您可以使用我们的新方法：this.$copyText。请参见sample2，在这里我们将剪贴板指令替换为v-on指令。
现代浏览器有一些限制，比如不能在没有用户交互的情况下使用window.open。所以复制东西也有同样的限制！在使用之前先测试一下。确保没有在任何异步方法中使用此方法。
在使用此功能之前，请先阅读：本期和本页。

emmm所以说不能在异步方法中使用这个方法，总算找到原因了，但是没找到解决方法。

解决办法：
就是用ajax原生的异步

copyFun(id) {
      $.ajaxSettings.async = false
      let that = this
      $.get(url, {}, function(result) {
          // 请求处理
	      that.$copyText(result.url).then(function(e) {
	        that.$message({
	          type: 'success',
	          message: '已复制'
	        })
	      }, function(e) {
	        that.$message({
	          type: 'warning',
	          message: '复制失败'
	        })
	      })
      }, 'json')
    },