VUE 实现复制功能

1、下载clipboard.js

npm install clipboard --save

 

2、在需要使用的组件中引入

import Clipboard from 'clipboard';

 

3、添加需要复制的内容与按钮

<span>我是需要复制的内容</span> <!-- 这个只是展示 -->
<button class="tag-read" data-clipboard-text="我是需要复制的内容" @click="copy">点击复制</button>

 

4、JS 中

methods: {
    copy() {
            var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
                  console.log('复制成功')
                  clipboard.destroy()// 释放内存
             })
        clipboard.on('error', e => {
               console.log('不支持复制,该浏览器不支持自动复制')
               clipboard.destroy()// 释放内存
             })
         }
    }