vue 一键复制内容到粘贴板

1.安装依赖

npm install clipboard --save

2.引入

   全局注册

import Clipboard from 'clipboard';
Vue.prototype.Clipboard = Clipboard

   单个组件使用

import Clipboard from 'clipboard';

3.属性说明

data-clipboard-target：指向要复制的元素节点

data-clipboard-action：copy（复制）或者cut（剪切）

data-clipboard-text：需要复制的内容

我们可以使用 data-clipboard-text 搭配 data-clipboard-action；也可以使用 data-clipboard-target搭配 data-clipboard-action

4.使用方法

我们点击复制将快递单号进行复制，代码如下 ：

<template>
  <div>
     <div>
        <span class="title">快递单号：</span>
           <div id="code">{{ expressNumber }}</div>
     </div>
     <span
        class="tagRead"
        ref="copy"
        id="copyBtn"
        data-clipboard-action="copy"
        :data-clipboard-text="expressNumber"
        @click="copy"
     >复制</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expressNumber: "11111111111111111",
    };
  },
  methods: {
    copy() {
      var clipboard = new this.Clipboard("#copyBtn");
      clipboard.on("success", () => {
        console.log('复制成功')
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        console.log("复制失败");
        clipboard.destroy();
      });
    },
  },
};
</script>