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')
    },
Logo

前往低代码交流专区

更多推荐