signed

QiShunwang

“诚信为本、客户至上”

项目中的复制问题 --- clipboard

2021/6/3 17:59:23   来源:

一、前言

今天总结下之前项目中遇到的有关复制文本用到的插件

二、学习

1、 clipboard.js

  • clipboard.js 是一款轻量级的实现复制文本到剪贴板功能的JS 库。没有使用 Flash,没有使用任何框架,开启 gzipped 压缩后仅仅只有 3kb
  • 通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中
    那么为什么会有 clipboard.js 这个库呢?因为作者 zenorocha 认为:
  • clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+

在这里插入图片描述

clipboard复印内容的方式有:

  1. 通过target复印目标内容
  2. 通过Function 方式
  3. 通过属性返回复印的内容


✍ 通过target复印目标内容

  • 在触发元素上添加 data-clipboard-target 属性,该属性值用来匹配另一个元素选择器。

  • 可以定义 data-clipboard-action 属性为 copy/cut 来明确操作是 复制 / 剪切
    如果忽略了这个属性,便默认 复制

  • 当定义data-clipboard-action属性为剪切 cut 的操作只能在 input 和 textarea 标签中起作用,在其他标签中会出现事件正常调用,但是操作是失败的,粘贴板是没有改变的。

     <!-- Target 目标内容-->
     <textarea id="bar">Mussum ipsum cacilds...</textarea>
    
     <!-- Trigger 触发器 -->
     <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
         剪切
     </button>
    
    
     <!-- js 部分 -->
     <script>
       // button的class的值
       // 复制的结果:Mussum ipsum cacilds...
       var clipboard = new Clipboard('.btn');
       clipboard.on('success', function(e) {
         console.log(e);
       });
    
       clipboard.on('error', function(e) {
          console.log(e);
       });
     </script>
    


✍ 通过属性复制文本

通过 在触发元素中 添加 data-clipboard-text 属性 来完成复制

  • 👉 第一种:单节点

    通过 id / class 指定节点对象,并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容

    <!-- Trigger -->
    <button id="btn" data-clipboard-text="Just because you can">
        Copy to clipboard
    </button>
    
    
    <!-- js 部分 -->
    <script>
     // 复制的结果:Just because you can
     var clipboard = new Clipboard('#btn');
     clipboard.on('success', function(e) {
        console.log(e);
     });
    
     clipboard.on('error', function(e) {
        console.log(e);
     });
    </script>
    

  • 👉 第二种:多节点

    获取所有button按钮元素,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3

    <!-- Trigger -->
    <button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
    
    <!-- js 部分 -->
    <script>
     var btns = document.querySelectorAll('button');
     var clipboard = new Clipboard(btns);
    // 或者
     var clipboard = new Clipboard('.btn');
     
     clipboard.on('success', function(e) {
        console.log(e);
     });
    
     clipboard.on('error', function(e) {
        console.log(e);
     });
    </script>
    

🚩 注意:data-clipboard-text “级别最高”,在 data-clipboard-target 等属性存在时,复制内容及相关参数以 data-clipboard-text 为准

<p id="bar"> 美少女养成记 </p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>


<!-- js 部分 -->
<script>
 // 复制的结果:Just because you can doesn't mean you should — clipboard.js
 var clipboard = new Clipboard('.btn');
 clipboard.on('success', function(e) {
    console.log(e);
 });
 
 clipboard.on('error', function(e) {
    console.log(e);
 });
</script>


✍ 通过Function方式

如果你不想修改你的HTML,有一个非常方便的命令式API供你使用。您所需要做的就是声明一个函数,执行您的操作,然后返回一个值。

  • 👉 第一种:动态的设置一个目标元素target,返回一个节点, 即动态设置点击复制的目标元素

    <!-- Target 目标内容-->
    <p id="bar"> 美少女养成记 </p>
    
    <!-- Trigger 触发器 -->
    <button class="btn"> 复制 </button>
    
    
    <!-- js 部分 -->
    <script>
     // 复制的结果:美少女养成记
     var clipboard = new Clipboard('.btn', {
        target: function(trigger) {
           return document.getElementById('bar');
        }
     });
     clipboard.on('success', function(e) {
        console.log(e);
     });
    
     clipboard.on('error', function(e) {
        console.log(e);
     });
    </script>
    

  • 👉 第二种:动态设置内容文本text,返回一个字符串String

    <!-- Target 目标内容-->
    <p id="bar"> 美少女养成记 </p>
    
    <!-- Trigger 触发器 -->
    <button class="btn"> 复制 </button>
    
    
    <!-- js 部分 -->
    <script>
       // 复制的结果:default text
       var clipboard = new Clipboard('.btn', {
          text: function(trigger) {
            return 'default text ';
          }
       });
       clipboard.on('success', function(e) {
          console.log(e);
       });
    
       clipboard.on('error', function(e) {
          console.log(e);
       });
    </script>
    


其他说明

  • 通过运行Clipboard.isSupported(),检查浏览器是否支持 clipboard.js,返回true则可以使用。

  • 如果在单页应用中使用时,要更精确地管理DOM的生命周期,可以使用以下方法清除创建的事件对象

    var clipboard = new ClipboardJS('.btn');
    clipboard.destroy();
    


2、 vue-clipboard2

  • 安装 vue-clipboard2 插件
    npm i vue-clipboard2
    
  • 在main.js中添加
    import VueClipboard from 'vue-clipboard2'
    Vue.use(VueClipboard)
    
  • 使用
    • 方法一
<div id="app"></div>
 
<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>
 
<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script> 
  • 方法二
<div id="app"></div>
 
  <template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>
 
  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
  </script>