Vue中配合clipboard.js实现点击按钮复制内容到剪切板

26
需求设定
  1. 点击某个按钮,将设置的目标内容(例如下载链接地址)复制到剪切板,可以在电脑上任何地方粘贴
  2. 不使用任何框架和使用Flash,以最小的代码实现该功能,并能兼容所有主流浏览器

插件选择
  • clipboard.js:

clipboard.png

  1. 官网链接地址:clipboard.js
  2. 引入方式:

    • NPM方式npm install clipboard --save
    • 直接引入:下载源代码以后将相关JS放在目录下,之后引入:<script src="xxx/clipboard.min.js"></script>
  3. 使用方式(官方文档例子):

    • HTML(target包括但不限于input)
    <!-- Target -->
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">
        点击复制
    </button>
    • JS
    var clipboard = new ClipboardJS('.btn');
    //成功回调
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);  
        e.clearSelection();
    });
    //失败回调
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
更多使用方式和功能请参考官方文档,这里只举例一个实用且常用的功能!

兼容性:

clipboard.png



正文开始了!!!,在Vue中咋用?
  1. Vue项目所使用的相关插件(这仅是本人使用到clipboard.js那个项目用到的,不全是必须的):vue-routervue-clies6-promiseaxiosscsselement-uiclipboard
  2. 使用clipboard步骤介绍开始:

    • 安装:npm install clipboard --save
    • 引入(main.js):

      import clipboard from 'clipboard';
      //注册到vue原型上
      Vue.prototype.clipboard = clipboard;
    • template

      <input type="text" id="success_form_input" readonly="readonly" v-model="link"/>
      /*button上的这个ref需要命名一个,名字自己取,下面会讲解为什么*/
      <button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">复制</button>
    • Events:

      data() {
        return {
           copyBtn: null //存储初始化复制按钮事件
        }
      },
      mounted() {
      /*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是:this + 注册时命名名字)
      *这里需要用到刚才给button命名的ref的名字,因为这是vue提供的获取DOM的方法,虽然可以通过引入jQuery来获取,但是不推荐这样做,具体原因可以看官方文档和网上论坛搜索
      *这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来,具体原因下面会有详述
      */
        this.copyBtn = new this.clipboard(this.$refs.copy);
      },
      methods: {
        copyLink() {
        /*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/
          let _this = this;
          let clipboard = _this.copyBtn;
          clipboard.on('success', function() {
              _this.$message({ /*这是使用了element-UI的信息弹框*/
                  message: '复制成功!',
                  type: 'success'
              });
          });
          clipboard.on('error', function() {
              _this.$message({
                  message: '复制失败,请手动选择复制!',
                  type: 'error'
              });
          });
        }
      }
  3. Events的写法解惑及使用clipboard过程中的注意事项:
  • 为什么要在mounted周期中把按钮先存储起来?

    • 答:经过亲自测试,若在点击事件中再初始话,即把mounted中的内容放到copyLink函数中,那么第一次点击会无效,第二次及以后便能生效,这样肯定是不符合要求的,因此我想了这么一个办法来解决这么一个问题,当然不单单不是mounted周期,放在createdbeforeMounted周期应该也是行的,虽然没有亲自测试,但是因为这两个周期已经能获取DOM了,应该是可以的。
  • 使用过程中的注意事项

    • 使用NPM安装完成之后记得在main.js中引入并注册到Vue原型上,名字可以自己取。
    • 使用时通过this + 原型上命名名字来调用clipboard
    • 按钮通过ref的命名来取,就是this.$refs.xxx,不推荐使用jQuery来获取DOM。
    • 关于clipboard复制按钮的要求请遵从官方文档要求,例如加上data-clipboard-actiondata-clipboard-target等。

使用过程中若有任何疑问,欢迎留言询问!^_^^_^ 不足之处,欢迎各位批评指正!

如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

41 条评论
AngelLover2017 · 2018年12月24日

放在 created 钩子里好像是不行的
[Vue warn]: Error in created hook: "TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList"

+2 回复

0

一般在mounted周期,其它周期也不合适做这种操作,而且不同vue版本也有些差异,覆盖测试没做那么详细,估计你所使用的vue的版本应该挺新的了

luozz 作者 · 2018年12月25日
0

报“[Vue warn]: Error in created hook: "TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList"”这个错的原因是:你使用了封装的组件,例如iview的 <Button>或者是element的 <el-button>,使用原生的 <button>就没有这个问题了。亲测有用

C__C · 3月7日
0

我本身就是自己写的div,也是这个报错,无法初始化。现在就需要复制2次了

inputherf · 3月21日
dolphinfine · 2018年03月29日

clipboard确实是有第一次点击不会生效的问题,我用的nextTick解决的。

+1 回复

0

可以可以 ^_^

luozz 作者 · 2018年03月29日
0

nextTick 怎么做的?执行的点击语句包裹在nextTick 函数中?求教。谢谢了

橘南枳北 · 2018年05月22日
0

@橘南枳北 使用插件需要进行初始化,要么像我写的那样先在mounted周期进行初始化,要么在点击的时候初始化,之后写一个nextTick,把要执行的操作代码放在里面.

luozz 作者 · 2018年05月22日
空空空空丶 · 2018年11月30日

大佬,我转载收藏一下可以吗?注明您的原链接

+1 回复

0

可以!^_^^_^

luozz 作者 · 2018年12月03日
Heekei · 1月14日

恕我直言,作者你没理解到clipboard的使用方法…你的写法会导致第n次点击时, 触发n-1次 复制。

+1 回复

0

这个就实际使用过一次而已,感觉插件挺好,拿出来分享一些而已

luozz 作者 · 1月15日
橘南枳北 · 2018年05月22日

copyOrder() {

    /*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/
        this.copyBtn = new this.clipboard(this.$refs.copy);
        this.$nextTick(function () {
            let _this = this;
            let clipboard = _this.copyBtn;
            clipboard.on('success', function() {
                _this.$vux.toast.text('复制成功!', 'middle');
            });
            clipboard.on('error', function() {
                _this.$vux.toast.text('复制成功!', 'middle');
            });
        })
    }, 

//效果是一样的,依然需要第二次才能点击。。。多个列表都是需要复制的。貌似无法在mounted时初始化

回复

0

你直接试试我那个方法,不用nextTick,不同的需求需要灵活运用。 还有把let _this=this;放在nextTick外面试试

luozz 作者 · 2018年05月22日
0

@luozz 谢谢了大兄弟。依然不行, 我到Github看看isue区域的解决办法吧

橘南枳北 · 2018年05月22日
0

@橘南枳北 嗯,动态的列表内容复制需要动态的ref设置,一个ref只能针对一个,这个是需要指向一个确定的DOM上,你可以看是不是需要获取到目标的子元素之类的元素才能复制等

luozz 作者 · 2018年05月22日
不是鱿鱼 · 2018年07月28日

作者用的什么版本的clipboard? 我这会报 "TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList" clipboard不接收我的node啊

回复

0

一般是最新版本的

luozz 作者 · 2018年07月29日
0

我也出现这个报错,请问是怎么解决的?

yulei_Q · 2月22日
0

@yulei_Q 报“[Vue warn]: Error in created hook: "TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList"”这个错的原因是:你使用了封装的组件,例如iview的 <Button>或者是element的 <el-button>,使用原生的 <button>就没有这个问题了。亲测有用

C__C · 3月7日
心欲无痕 · 2018年11月16日

请问复制内容如果是通过点击事件发送请求来动态获取的呢,这样该怎么弄啊?求解答,我试过,第二次才能复制成功

回复

0

这个获取到制定区域的内容是需要先进行初始化,因此你要考虑到提前进行初始化,之后在请求回来之后再进行获取,这样就能一次复制成功了

luozz 作者 · 2018年11月16日
0

貌似是因为我第一次点击时复制内容是空的,虽然是请求成功后给它赋值的,但是赋值并没有立即生效,第二次才生效是因为第一次已经赋值过,所以成功了

心欲无痕 · 2018年11月16日
0

@心欲无痕 对,因为请求是异步的,第一次复制时请求还不一定回来了呢,所以一般是无效的

luozz 作者 · 2018年11月16日
念念 · 2月15日

这个插件必须通过data-clipboard-target绑定被复制元素的id才行吗,我现在需要点击自身拿到自身的文本,例如p,,span,div等等,而且我的页面元素是table里的某一列,table是根据后台拿的数据动态加载的,所以没办法写id。这种情况怎么办?

回复

0

这个我也试验过,好像不行,因为要每一个赋值的对象都要实例化,如果点击的时候才实例化,那么第一次无法成功,这应该是这个插件的一个缺陷,或者是还有啥方法没用对,这个我在项目中也就使用过一次,用的不多,没做深入的了解

luozz 作者 · 2月15日
载入中...