clipboard.js使用總結

阿新 • • 發佈：2021-11-12

（1）介紹：

clipboard.是一款輕量級的實現複製文字到剪貼簿功能的外掛。通過該外掛可以將輸入框www.cppcns.com，文字域，DIV元素中的文字等文字內容複製到剪貼簿中

clipboard.js支援主流的瀏覽器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

（2）clipboard影印內容的方式有

從target影印目標內容
通過function 要影印的內容
通過屬性返回影印的內容

target影印目標內容，這裡不說，就說一下function和屬性的操作。

（3）Function操作有兩種：

第一種：

通過target的function影印內容
通過target指定要影印的節點，這裡返回舒值是‘hello'

   <button class="btn">Copy_target</button>
   <div>hello</div>

   <script>
   var clipboard = new Clipboard('.btn',{
   // 通過target指定要影印的節點
       target: function() {
                  return document.querySelector('div');
             }
   });

   clipboard.on('success',function(e) {
       console.log(e);
   });

   clipboard.on('error',function(e) {
       console.lowww.cppcns.com 
g(e);
   });
   </script>

第二種：

通過text的function影印內容
text的function指定的影印內容，這裡返回‘to be or not to be'

<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn',{
   // 點選copy按鈕，直接通過text直接返回影印的內容
       text: function() {
           return 'to be or not to be';
       }
   });

   clipboard.on('success',function(e) {
       console.log(e);
});

（4）通過屬性返回影印的內容

第一種：單節點

通過id指定節點物件，並做為引數傳送給Clipboard。這裡的返回值的內容是data-clipboard-text的內容

// 通過id獲取複製data-clipboard-text的內容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>
 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success',function(e) {
        console.log(e);
    });
 
    clipboard.on('error',function(e) {
        console.log(e);
    });
</script>

第二種：多節點

通過class獲取所有button按鈕，並做為引數傳送給Clipboard。每個按鈕被點選時，返回值的內容是其對應的data-clipboard-text的內容，分別是1，2，3

//   通過class註冊多個button，獲取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success',function(e) {
        console.log(e);
    });
    </script>

（5）函式和屬性的相容方式

函式：

//ClipboardJS.isSupported()　　//--------這句為：是否相容
var clipboard = new Clipboard('.btn');
//優雅降級:safari 版本號>=10,提示覆製成功;否則提示需在文字選中後，手動選擇“拷貝”進行復制
clipboard.on('success',function(e) {
    alert('複製成功!')
    e.clearSelection();
});
clipboard.on('error',function(e) {
    alert('請選擇“拷貝”進行復制!')
//嘗試去掉alert，能彈出系統的“拷貝”工具，但是需要點選兩次按鈕才能彈出，具體原因還不清楚，參考上圖。有人說可以試一下在觸發的地方寫一個空點選事件,nclwww.cppcns.comick="" 因為ios不單純支援on事件
});

屬性：

<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'[email protected]'"
    /> 

-------------------
  copy() {
     var clipboard = new Clipboard(".email")
     // console.log(clipboard);
     clipboard.on("success",e => {
       // console.log("複製成功",e);
       Toast({
         message: "複製成功"
       })
       // 釋放記憶體
       clipboard.destroy()
     })
     clipboard.on("error",e => {
http://www.cppcns.com       // 不支援複製
       Toast({
         message: "手機許可權不支援複製功能"
       })
       console.log("該瀏覽器不支援自動複製")
       // 釋放記憶體
       clipboard.destroy()
     })
   }

到此這篇關於clipboard.js使用總結的文章就介紹到這了,更多相關clipboard.js使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！