钉钉内部实现复制粘贴功能

上一章遗留问题钉钉端内部跳转到外部链接，无法正常返回的问题，如果遇到跳转的页面需要登录才能进入的网址，就会陷入死循环永远也无法退出，只能关闭应用重新进入。

处理办法：转换思路，给url字段重新加上复制粘贴的按钮，让用户自己复制之后粘贴到浏览器中进行访问，虽然用户体验不太好，目前为止只能这么解决。

复制粘贴的三种实现方式：

#利用vue中的粘贴板功能，点击按钮后进行复制
#首先安装Clipboard的复制版，npm install --save clipboard
#然后在页面中引入import Clipboard from 'clipboard'
 <p v-if='basic.value'>{{formatValue(basic)}}</p>
 <button type="primary"
              plain
             v-if='basic.value'
            class='tag-read'
           @click="copyUrl(basic.value)">复制链接</button>
#在methods中
 copyUrl (data) {
      var Url = data
      var clipboard = new Clipboard('.tag-read', {
        text: function () {
          return Url
        }
      })
      clipboard.on('success', e => {
        this.$toast.success('复制成功!')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$toast.fail('复制失败!')
        // 释放内存
        clipboard.destroy()
      })
    },

上面这种方法在PC端没有任何问题，但是在钉钉开发不适用，不能正常复制，猜测钉钉内部做了拦截

#第二种方法利用js实现复制功能
 <p v-if='basic.value'>{{formatValue(basic)}}</p>
 <button type="primary"
              plain
             v-if='basic.value'
           @click="copyUrl(basic.value)">复制链接</button>
copyUrl(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
      },

这种方法也是只能早浏览器上进行粘贴，在钉钉内部显示复制成功，但是并不能真正粘贴到浏览器上，并且该种方法复制成功之后，点击返回按钮，会在背的页面上留下一个输入框，目前未找到问题，有知道的小伙伴可以留言或私信给我，谢谢

所以怎么办，还是要回归到钉钉，这也是我的一个不好习惯，总是第一时间去搜百度，必应，没有查看官方文档，其实人家有自己的复制粘贴功能，你只需要利用

 dd.biz.clipboardData.setData({
        text: data, // 要复制粘贴板的内容
        onSuccess: (result) => {
          this.$toast.success('复制成功!')
        },
        onFail: () => {
          this.$toast.fail('复制失败!')
        }
      })

搞定！！！

敲黑板！！！一定要先查看官方文档，很重要