复制文本到剪切板的方法(个人笔记)

一、navigator.clipboard.writeText()方法

注：该方法需要在安全域下才能够使用，比如：https 协议的地址、127.0.0.1、localhost

<template>
  <div>
    <el-button type="primary" @click="handleCopy">复制</el-button>
    <div>{{ message }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "复制的内容",
    };
  },

  methods: {
    handleCopy() {
      navigator.clipboard
        .writeText(this.message)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

二、clipboard.js的使用

原文链接：https://segmentfault.com/a/1190000020651289?utm_source=tag-newest

安装

从npm 安装

npm install clipboard --save

或者，如果您不喜欢包管理，只需下载一个ZIP文件

设置

script 引入

 <script src="dist/clipboard.min.js"></script>

三方 CDN引入

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn');  //通过类名.btn的元素实例化

在内部，我们需要获取与选择器匹配的所有元素，并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项，则此操作会消耗大量内存。
因此，我们使用事件委托，它将多个事件侦听器替换为一个侦听器。

报错

如出现innerHtml的报错，就把实例化写到定时器里面。

setTimeout(()=>{
    new Clipboard(document.getElementById('copyBtn'));
},1000)

使用方法

我们正在经历一个声明性的复兴，这就是为什么我们决定利用HTML5的数据属性来获得更好的可用性

复制

相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target 属性，该属性值用来匹配另一个元素选择器。

<!-- Target -->
<!-- <input
  id="bar"
  value="无敌大帅哥"
> -->
<p id="bar">无敌大帅哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>

剪切

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

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如上例，剪切 cut 的操作只能在 <input> 和 <textarea> 标签中起作用，在其他标签中会出现事件正常调用，但是操作是失败的，粘贴板是没有改变的。

通过属性复制文本

我们甚至不必需要其他承载文本的元素，仅通过在触发元素中添加 data-clipboard-text 属性来完成复制

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

注意：

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

事件

回调函数： success / error

事件名	参数
success	event.action `copy/cut` 操作
	event.text `copy/cut` 操作文本内容
	event.triger 触发操作的`DOM`元素
error	event.action `copy/cut` 操作
	event.triger 触发操作的`DOM`元素

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.js不包括任何CSS或内置的工具提示解决方案。
您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。如果你正在寻找相似的外观和感觉，你可能想看看。

高级用法

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

例如如果想动态的设置一个目标元素target，则需要返回一个节点,即动态设置点击复制的目标元素

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

如果想动态设置内容文本text，则返回一个字符串String

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label') || 'default text ';
    }
});

在Bootstrap Modals 中或与任何其他更改焦点的库一起使用时，将希望将焦点元素设置为 container 值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

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

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

动态生成多个实例

<el-table-column align="center" prop="push_flow" label="推流地址">
     <template scope="{row}">
          <span>{{row.push_flow}}</span>
          <el-button 
              type="text"
              size="small" 
              class="" 
              :id="'streamurl'+row.live_id" 
              :data-clipboard-text="row.push_flow" 
              @click="handleFlowCopy(row.live_id)">
              复制
           </el-button>
      </template>
</el-table-column>

handleFlowCopy(id) {
    // 根据当前id动态生成不同实例
    var streamurl = new Clipboard(document.getElementById('streamurl' + id));
    streamurl.on('success', (e) => {
        this.$message.success('复制成功')
        streamurl.destroy()
    });
},

以上方法当点击按钮时才实例化，所以第一次点击复制不成功，第二次后面才成功。处理方法：当请求table数据成功后就实例化一次。

handleGetTableData() {
     getData().then(res => {
          res.data.map(i => {
               new Clipboard(document.getElementById('streamurl' + i.live_id));
          })
     })
}

浏览器支持

这个库同时依赖于Selection和execCommand api。所有浏览器都支持第一个，而以下浏览器支持第二个。

Chrome 42 +
Edge12 +
Firefox 41 +
IE 9 +
Opera 29 +
Safari 10 +

好消息是，如果需要支持旧的浏览器，clipboard.js可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时，因为文本已经被选中，所以在调用错误事件时，请按Ctrl+C进行复制。
你也可以通过运行ClipboardJS.isSupported()来检查是否支持clipboard.js，这样你就可以从UI中隐藏复制/剪切按钮。