在vue 中使用 Clipboard.js

Question

我现在用npm 安装了 Clipboard.js

需要import 引入吗？　　
需要引入的应该怎么引入。。　

<button
class="setAsideInformation_information_fz btn"
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">复制</button>

没有成功。。　

求指教－－谢谢

Answer 1

<template>
  <div id="app">
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js!">
        Copy to clipboard
    </button>
  </div>
</template>

<script>
import Clipboard from 'clipboard';

export default {
  name: 'app',
  data () {
    return {
    }
  },
  mounted() {
    const clipboard = new Clipboard('.btn');
  }
}
</script>

Answer 2

很简单的 :

首先有html ,

<button 
    @click="onCopy('EFT-bank-id')" 
    id="EFT-bank-id" 
    data-clipboard-text="8546 1001 0122 805876">
    点击复制
</button>

再和 methods 中的方法进行配合 ,

onCopy(elementId){
    var clipboard = new ClipboardJS(`#${elementId}`);
    clipboard.on('success', function(e) {
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('[天安宝莲] 不支持自动复制，请手动复制 , Action:', e.action);
        console.error('[天安宝莲] 不支持自动复制，请手动复制 , Trigger:', e.trigger);
        Toast(`不支持自动复制，请手动复制`);
    });
},