Vue-点击复制内容方法 — clipboard的使用

clipboard.js：

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

下载

npm install clipboard --save

使用

clipboard复印内容的方式有

• 从target复印目标内容
• 通过function 要复印的内容
• 通过属性返回复印的内容

引入js文件：

import Clipboard from 'clipboard';
new Clipboard('.btn')

1. 场景一：点击复制输入框内容：
   一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。
   这个属性的值就是能匹配到另一个元素的选择器。

• html：

在这里插入代码片
```
<input id="foo" value="复制文本">

<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
button>

2. 场景二：从另一个元素剪切文本
   可以定义一个 data-clipboard-action 属性来指明你想要复制还是剪切内容，默认为复制。
   

• html：

<textarea id="bar">点击下面按钮复制文本.textarea>


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

备注： cut 操作只在 或者 元素上生效

• 场景三： 从属性复制文本
  甚至不需要从另一个元素来复制内容。 仅需要给目标元素设置一个data-clipboard-text 属性即可
  

• html：

<button class="btn" data-clipboard-text="这是复制文本">
    Copy to clipboard
button>

• 场景四：复制后想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字
  
• HTML(pug格式)

el-button(v-if='shopCode' type='text' @click='copyShopCode' size='mini' class='copy') 复制门店code

• js

import Clipboard from 'clipboard';
....

    // 复制门店code函数
    copyShopCode() {
      const clipboard = new Clipboard('.copy', {
        // 点击copy按钮，直接通过text直接返回复印的内容
        text: () => this.baseInfo.shopCode,
      });
        // 通过传递DOM选择器，HTML元素或HTML元素列表实例化
      clipboard.on('success', (e) => {
        this.$message.success(`复制成功，内容为：${e.text}`);
        e.clearSelection();
          // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', () => {
          // 不支持复制
        this.$message.error('该浏览器不支持自动复制');
          // 释放内存
        clipboard.destroy();
      });
    },