在vue 中使用 Clipboard.js

我现在用npm 安装了 Clipboard.js

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

clipboard.png

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

clipboard.png

没有成功。。 

求指教--谢谢

阅读 11.1k
评论
    2 个回答
    <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>
      • 2.7k

      很简单的 :

      首先有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(`不支持自动复制,请手动复制`);
          });
      },
        撰写回答

        登录后参与交流、获取后续更新提醒