Vue 使用clipboard複製文本信息

1、安裝clipboard

npm install clipboard --save

2、引入clipboard

(1)全局引入,在main.js引入

import clipboard from 'clipboard';
//註冊到vue原型上
Vue.prototype.clipboard = clipboard;

(2)在某個組件中使用時引用

import Clipboard from 'clipboard';

3、在組件中使用

<template>
     <div data-clipboard-action="copy" class="copy" :data-clipboard-text="12345678" @click="copy">點擊複製</div>
</template>

<script>
  import Clipboard from 'clipboard';
  export default {
          data() {
		return {}
          },
          methods:{
            copy() {  
                 let clipboard = new this.clipboard(".copy");
                 clipboard.on('success', function () {
                   console.log("複製成功")
                 });
                 clipboard.on('error', function () {
                   console.log("複製失敗")
                 });
             }
        }
    }
</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章