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

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

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

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

#利用vue中的粘贴板功能,点击按钮后进行复制
#首先安装Clipboard的复制版,npm install --save clipboard
#然后在页面中引入import Clipboard from 'clipboard'
 

{{formatValue(basic)}}

#在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实现复制功能
 

{{formatValue(basic)}}

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('复制失败!')
        }
      })

搞定!!!

敲黑板!!!一定要先查看官方文档,很重要

你可能感兴趣的:(钉钉内部实现复制粘贴功能)