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、最終效果