您好,登錄后才能下訂單哦!
點擊復制功能主要通過 clipboard.js 來實現
在vue中使用clipboard.js 時候發現一個問題,就是如果不是input或者button 按鈕的話,則復制不成功,使用步驟如下:
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、添加需要復制的內容
例如:<button class="tag-read" data-clipboard-text="我是可以復制的內容,請點擊復制" @click="copy">立即閱讀</button>
解析: data-clipboard-text 后邊跟需要復制的內容
4、添加點擊后的方法
copy() { var clipboard = new Clipboard('.tag-read') clipboard.on('success', e => { console.log('復制成功') // 釋放內存 clipboard.destroy() }) clipboard.on('error', e => { // 不支持復制 console.log('該瀏覽器不支持自動復制') // 釋放內存 clipboard.destroy() }) }
以上這篇Vue實現點擊按鈕復制文本內容的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。