欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子

 更新時(shí)間：2019年11月09日 15:49:50   作者：小破孩呦  
今天小編就為大家分享一篇Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

點(diǎn)擊復(fù)制功能主要通過 clipboard.js 來實(shí)現(xiàn)

在vue中使用clipboard.js 時(shí)候發(fā)現(xiàn)一個(gè)問題，就是如果不是input或者button 按鈕的話，則復(fù)制不成功，使用步驟如下：

1、引入clipboard.js，方法如下：

第一種直接npm安裝：npm install clipboard --save

第二種：<script src="js/clipboard.min.js"></script>（下載地址：https://clipboardjs.com/）

2、在需要使用的組件中import

引用方法：import Clipboard from 'clipboard';

3、添加需要復(fù)制的內(nèi)容

例如：<button class="tag-read" data-clipboard-text="我是可以復(fù)制的內(nèi)容，請點(diǎn)擊復(fù)制" @click="copy">立即閱讀</button>

解析： data-clipboard-text 后邊跟需要復(fù)制的內(nèi)容

4、添加點(diǎn)擊后的方法

  copy() {
  var clipboard = new Clipboard('.tag-read')
  clipboard.on('success', e => {
   console.log('復(fù)制成功')
   // 釋放內(nèi)存
   clipboard.destroy()
  })
  clipboard.on('error', e => {
   // 不支持復(fù)制
   console.log('該瀏覽器不支持自動(dòng)復(fù)制')
   // 釋放內(nèi)存
   clipboard.destroy()
  })
  }

以上這篇Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論