clipboard插件的使用


  寫在前面:clipboard是一個提供復制功能的插件,非常好用。
  最近在項目中有一些復制的功能的需求,看了下clipboard這款插件提好用的,記錄一下。
  1,npm install clipboard --save  先下一下插件;
  2,我的項目是vue的,所以在你需要用到的頁面中引入一下
  
 import Clipboard from 'clipboard'

  3,比如要復制一個url鏈接在template里面需要給給綁定事件的元素綁定一個類名

  

<div>qbUrl:{{qb_url}}<Button type="primary" size="small" class="copy-qb" @click="copyQbUrl(qb_url)">復制</Button></div>

  4,在methods中綁定的事件

copyQbUrl (url) {
      let clipboard = new Clipboard ('.copy-qb', {
        text: () => {
          return url
        }
      })
      clipboard.on('success', () => {
        this.$Message.success('復制成功!')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$Message.success('復制失敗,請手動復制!')
        clipboard.destroy()
      })
    }

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM