If the project achieves the paste copy function, there are three methods on the market at present, which have both advantages and disadvantages. You can choose them according to the actual situation of your project. This section will elaborate on all three methods, with the third one being recommended.

1. Project demand Diagram presentation:

1. Install third-party plug-ins (not recommended)

This approach is compatible and is not recommended if the project is only used once.

Installing a plug-in

npm install clipboard --save
Copy the code

The introduction of the plugin

import Clipboard from 'clipboard';
Copy the code

Used in the project

<template> <span class="copy" @click="onCopy"> < I class="iconfont iconcopy"></ I >< span> <script> methods: { onCopy(){ let clipboard = new Clipboard('.copy') clipboard.on('success', E => {console.log(' copy successful ') // release memory clipboard.destroy()}) clipboard.on('error', E => {// does not support console.log(' this browser does not support automatic replication ') // Release memory clipboard.destroy()})}} </script>Copy the code

2. Document. ExecCommand () copy method (not recommended)

This method does not require a plug-in, but the official website states:

Used in the project

<script> methods: {onCopy(){// Create an input box const Input = document.createElement("input") // add the specified DOM to the end of the body Document. The body. The appendChild (input) / / set the value of the input box for the broadcast address input. The setAttribute (" value ", Select () //copy means to copy the selected content to the clipboard // document.execcommand () method manipulates the elements of the editable content area // Returns a Boolean, If (document.execcommand ("copy")) {document.execcommand ("copy")} // Delete this node document.body.removeChild(input) } </script>Copy the code

3. Clipboard. WriteText method (highly recommended)

instructions

The writeText() method of the Clipboard interface writes specific strings to the operating system’s Clipboard. Returns a Promise that will be resolved once the contents of the clipboard are updated. Reject writing to the clipboard if the caller does not have permission to write to it

Used in the project

OnCopy () {the navigator. Clipboard. WriteText (this) detailData) clientSecret). Then (() = > {this. $message. Success (' copy success ')})}Copy the code

END…