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

📣文章目录

1.Clipboard插件

1.安装

项目路径输入以下命令

npm install clipboard –save

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

2.页面使用步骤

1.导入clipboard

在需要使用的页面中引入

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

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

使用方式一：（方法传递数据进行复制）

1.创建要复制的对象

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>

2.演示效果

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

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

使用方式二：（获取指定元素的文本内容）

1.创建要复制的对象

js代码

<script>

import clipboard from 'clipboard'
export default {
  components: {
    clipboard
  },
  data() {
    return {
   
    }
  },
  mounted: function () {

  },
  methods: {
    clickCopy() {
      //创建出来的的剪贴板对象
      let clipboardBean = new clipboard("#copy");
      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">
      <div class="copyClass">
        复制指定文本的数据哈哈哈哈
      </div>
      <button @click="clickCopy"
              data-clipboard-target=".copyClass"
              id="copy">复制指定元素信息</button>
    </div>
  </div>

</template>