luozz
  • 5.6k

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

需求设定
  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等。

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

推荐阅读
superMan
用户专栏

密切关注前端在开发过程中遇到的问题,分享遇到的问题并提供自己的解决方法,同时向更多的人分享更多的...

2 人关注
6 篇文章
专栏主页
目录