Vue one-click copy text content

Click to copy function is mainly realized through clipboard.js

Note: When using clipboard.js in vue, I found a problem, that is, if it is not an input or button button, the copy will not succeed. The steps are as follows:

1. Import clipboard.js, the method is as follows:

The first direct npm installation: npm install clipboard --save
The second: (download address: https://clipboardjs.com/ )

2. Introduce in required components or pages

import Clipboard from "clipboard";

3. Add the content that needs to be copied

 解析： data-clipboard-text 后边跟需要复制的内容

Example:

<button class="pop-btn" data-clipboard-text = "15889745874" @click="copy">复制号码</button>

4. Add the post-click method

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