Vue引入依赖实现文本复制·剪切板

📣文章目录

• ​​1.Clipboard插件​​

• ​​1.安装​​

• ​​2.页面使用步骤​​

• ​​1.导入clipboard​​
• ​​2.创建要复制的对象​​
• ​​3.演示效果​​

1.Clipboard插件

1.安装

项目路径输入以下命令

npm install clipboard --save

使用npm方式安装，可以在项目的​​package.json​​​查看依赖是否引入

2.页面使用步骤

1.导入clipboard

在需要使用的页面中引入

//名称可以随意取     导入clipboard
import clipboard from 'clipboard'

然后需要在​​components​​​中把自己定义好的组件名称填写进去

2.创建要复制的对象

js代码

<script>

import clipboard from 'clipboard'
export default {
  components: {
    clipboard
  },
  data() {
    return {
      testMsg:"点击复制哈哈哈哈"
    }
  },
  mounted: function () {

  },
  methods: {
    clickCopy(res) {
      //创建出来的的剪贴板对象,通过id来获取要复制的对象，也可以通过class来获取要复制的对象
      let clipboardBean = new clipboard("#copy", {
        text: function (trigger) {
          //返回的就是复制的内容，可以在返回前面对数据进行增强等...
          return res;
        }
      });
      clipboardBean.on('success', function (e) {
        console.log("成功复制...")
        //复制完成后销毁clipboard对象，预防下一次调用会多次提示
        clipboardBean.destroy()
      });

      clipboardBean.on('error', function (e) {
        console.log("失败...")
        //复制完成后销毁clipboard对象，预防下一次调用会多次提示
        clipboardBean.destroy()
      });
    },
  },

}
</script>

html代码

<template>
  <div>
    <div class="listRight_context_bottom">
      <button @click="clickCopy(testMsg)" id="copy">复制信息</button>
    </div>
  </div>
</template>

3.演示效果

点击按钮，控制台输出复制成功

然后再看剪切板是否已经复制成功了，快捷键win+v查看，第一次使用快捷键需要激活一下，然后下次使用快捷键就可以看之前复制的信息