首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网页实现把文本复制到粘贴板

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

作者头像
卡少
发布2018-05-16 10:35:49
2.2K0
发布2018-05-16 10:35:49
举报
文章被收录于专栏:卡少编程之旅卡少编程之旅

思路整理

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

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

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

  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。相信还是比较容易看懂的哈~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 思路整理
  • 原理剖析
  • 插件使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档