您好,登錄后才能下訂單哦!
安裝clipboard.js
github路徑:https://github.com/zenorocha/clipboard.js
安裝:
npm install clipboard --save
引入clipboard.js
import ClipboardJS from "clipboard";
或
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
使用:
剪切
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>dfsf</title> <script src="https://clipboardjs.com/dist/clipboard.min.js"></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { new ClipboardJS('.btn'); }) </script> </head> <body> <div> <!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> </div> </body> </html>
復(fù)制
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
3.在vue中使用并自定義復(fù)制內(nèi)容,定義復(fù)制回調(diào):
<div class="dlbtn cpkw" @click="copykeyword">復(fù)制關(guān)鍵詞</div> ····· copykeyword() { var clipboard = new ClipboardJS(".cpkw", { text: function(trigger) { //alert("ok"); return "testvalue"; } }); clipboard.on("success", e => { //復(fù)制成功 // 釋放內(nèi)存 clipboard.destroy(); }); clipboard.on("error", e => { // 不支持復(fù)制 console.log("該瀏覽器不支持自動復(fù)制"); // 釋放內(nèi)存 clipboard.destroy(); });
以上就是本次介紹的全部知識點(diǎn)內(nèi)容,感謝大家對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。