专栏首页卡少编程之旅网页实现把文本复制到粘贴板

网页实现把文本复制到粘贴板

思路整理

有一个按钮可以触发以下逻辑:

  • 将生成的文本自动复制到剪切板上 结果要有友好提示
  • 复制成功后可以粘贴到任何地方

一开始我以为有通用的接口,一番调研之后发现有以下几种东东:

  1. document.execCommand("copy")这个用于在要复制的文本处于被选中状态时使用
  2. window.clipboardData.setData("Text", clipBoardContent)为挂载在window上的API 据说兼容性不好
  3. 结合ZeroClipboard.js这个插件实现兼容性比较好的复制粘贴,通过new ZeroClipboard.client()来调用各个方法
  4. github上的库clipboard.js,通过new Clipboard('.btn')这种语法实现访问剪切板的操作,兼容性最好

有一些具体的代码示例参考CSDN中的内容,不过要考虑是否过时

由于是在vue框架基础上进行开发,最后选择了上面提到的第四种方法,完全抛弃了flash的hack实现(第三种),并且有着强大的兼容性,github上的star数量已经说明了一切,本来考虑是自己封装个指令来用,后来发现vue-clipboard2这个插件已经实现了封装,按照绝不重复造轮子的原则,直接在项目里用了起来。

原理剖析

clipboard.js的核心原理是虚拟了一个不可见的选区并利用复制的API来实现文本复制,因此最起码需要动态创造的页面元素有可以有被选中的属性。 为了方便学习vue自定义指令的写法,现在把vue-clipboard2的代码摘抄过来加以学习:

var Clipboard = require('clipboard')

var VueClipboard = {
  install: function (Vue) {
    Vue.prototype.$copyText = function (text) { 
      // 这个是非触发式的调用api(this.$copyText)
      return new Promise(function (resolve, reject) {
        var fake_el = document.createElement('button');
        var clipboard = new Clipboard(fake_el, {
          text: function () { return text },
          action: function () { return 'copy' }
        });
        clipboard.on('success', function (e) {
          clipboard.destroy();
          resolve(e);
        });
        clipboard.on('error', function (e) {
          clipboard.destroy();
          reject(e);
        });
        fake_el.click();
      });
    };
    // 自定义指令时要注意vue自定义指令的生命周期
    Vue.directive('clipboard', {
      bind: function (el, binding, vnode) {
        if(binding.arg === 'success') {
          el._v_clipboard_success = binding.value
        } else if(binding.arg === 'error') {
          el._v_clipboard_error = binding.value
        } else {
          var clipboard = new Clipboard(el, {
            text: function () { return binding.value },
            action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
          })
          clipboard.on('success', function (e) {
            var callback = el._v_clipboard_success
            callback && callback(e)
          })
          clipboard.on('error', function (e) {
            var callback = el._v_clipboard_error
            callback && callback(e)
          })
          el._v_clipboard = clipboard
        }
      },
      update: function (el, binding) {
        if(binding.arg === 'success') {
          el._v_clipboard_success = binding.value
        } else if(binding.arg === 'error') {
          el._v_clipboard_error = binding.value
        } else {
          el._v_clipboard.text = function () { return binding.value }
          el._v_clipboard.action = function () { return binding.arg === 'cut' ? 'cut':'copy'}
        }
      },
      unbind: function (el, binding) {
        if(binding.arg === 'success') {
          delete el._v_clipboard_success
        } else if(binding.arg === 'error') {
          delete el._v_clipboard_error
        } else {
          el._v_clipboard.destroy()
          delete el._v_clipboard
        }
      }
    })
  }
}

// 以下是把这个模块输出的写法,兼容了amd/cmd
if (typeof exports == "object") {
  module.exports = VueClipboard
} else if (typeof define == "function" && define.amd) {
  define([], function() {
    return VueClipboard
  })
}

插件使用

如果对vue-directive比较熟悉的话,这些看懂都比较容易,核心就是new Clipboard()的调用,看完之后在vue中的用法自然很容易。定义的指令名为v-clipboard。并且可以传入v-clipboard:cut/v-clipboard:copy/v-clipboard:success/v-clipboard:error等参数及回调函数。

<el-button v-clipboard:copy="finalLink" v-clipboard:success="copySuccess" 
 v-clipboard:error="copyFail" type="primary">复制链接</el-button>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard) //使用自定义指令的写法
...
copySuccess() {
    this.$message({
        message: '链接已复制,请粘贴',
        type: 'success'
    })
},
copyFail() {
    this.$message.error('复制失败,请手动操作')
}
...

element-ui基础上开发而成,所以成功和失败的回调都直接用了elementAPI。相信还是比较容易看懂的哈~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React项目的服务端渲染改造(koa2+webpack3.11)

    卡少
  • Vue进阶部分文档研读和学习

    卡少
  • Hello World

    卡少
  • jQuery基础教程之事件监听操作

    老雷PHP全栈开发
  • Oracle Database Express 18.4版本:敏捷的二步安装法

    可能有些朋友还不知道,Oracle 推出了完全免费的 Express 版本,虽然存在一些功能限制,但是这个版本是完全免费的,只要你需要,可以随意适用。

    数据和云01
  • 学界 | 深度神经网络为什么不易过拟合?傅里叶分析发现固有频谱偏差

    众所周知,过参数化的深度神经网络(DNN)是一类表达能力极强的函数,它们甚至可以以 100% 的训练准确率记住随机数据。这种现象就提出了一个问题:为什么它们不会...

    机器之心
  • Android动态修改ListView中指定Item的组件属性

    Android动态修改ListView中指定Item的组件属性 在Android实际开发过程中经常会遇到,修改ListView中某一项的值。如何达到这一目的...

    用户1289394
  • python 居中显示分页算法

    页码永远是保持在中间位置的。而且显示的页码可以调整数量,适合页数非常多的时候使用。

    小贝壳
  • 解决:Error running: Cannot start process, the working directory报错

    运行项目时,提示:Error running 'XXX': Cannot start process, the working directory 'xxx\x...

    BigYoung小站
  • 简单的说下,(function(){...})() 与 (function(){...}()) 有什么区别?

    大周末的写太长了也没人看,标题所提问,其实没有区别, function xxx(){...},这是一个函数,解释器知道了,但并不运行它; xxx(),解释器遇到...

    web前端教室

扫码关注云+社区

领取腾讯云代金券