Detailed explanation of JavaScript clipboard usage

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

   <script>
   var clipboard = new Clipboard('.btn', {
   // Specify the node to be copied through target target: function() {
                  return document.querySelector('div');
             }
   });

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

   clipboard.on('error', function(e) {
       console.log(e);
   });
   </script>

<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn', {
   // Click the copy button and return the copied content directly through text text: function() {
           return 'to be or not to be';
       }
   });

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

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

// Get the content of data-clipboard-text by id <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>

// Register multiple buttons through class and get the value of 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);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

//ClipboardJS.isSupported() //--------This sentence is: Is it compatible? var clipboard = new Clipboard('.btn');
// Graceful downgrade: If Safari version number >= 10, the prompt is that the copy is successful; otherwise, it prompts that you need to manually select "Copy" to copy after selecting the text clipboard.on('success', function(e) {
    alert('Copy successful!')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('Please select "Copy" to copy!')
//Try to remove the alert, the system's "Copy" tool can pop up, but you need to click the button twice to pop up. The specific reason is not clear, refer to the picture above. Some people say that you can try to write an empty click event at the trigger location, οnclick="" because iOS does not simply support on events}); 

<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("Copy successful", e);
       Toast({
         message: "Copy successful"
       })
       // Release memory clipboard.destroy()
     })
     clipboard.on("error", e => {
       // Does not support copying Toast({
         message: "Mobile phone permissions do not support the copy function"
       })
       console.log("This browser does not support automatic copy")
       // Release memory clipboard.destroy()
     })
   }