vue项目中使用clipboard实现剪切板复制

 

1、安装clipboard包，官网https://clipboardjs.com/

npm install clipboard --save

 

2、使用时直接在你需要实现复制功能的页面里导入clipboard包即可

<template>
   <div>
    <span>{{test}}</span>
    <button type="button" class="testCopy" @click="copy()">复制</button>
   </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  name: "CopyClipboard",
  data() {
    return {
      test: 'hhhhh'
    }
  },
  methods: {
    copy() {
      let txt = this.test;
      let clipboard = new Clipboard('.testCopy', {
        text: function () {
          return txt
        }
      });
      clipboard.on('success', e => {
        console.log(this, '复制成功!', 'success');
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log(this, '该浏览器不支持自动复制!', 'warning');
        // 释放内存
        clipboard.destroy()
      })
    },
  },
}
</script>

<style scoped>

</style>

　　

3、最终效果