vue implements the method of copying content to the clipboard

Below I will share with you a method of copying content to the clipboard in vue. It has a good reference value and I hope it will be helpful to everyone.

1 . npm is installed into the project directory file

npm install clipboard --save

2 . import introduction file

import Clipboard from 'clipboard';

3. Write the content to be copied in data-clipboard-text in the custom attribute in the required html element

<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">复制地址</button>

4. Find the content in the element through the class name in JavaScript.

let clipboard = new Clipboard('.copyBtn');

That’s it. If you need this address, just reference the clipboard variable directly in the method. That’s it. If you don’t need it, don’t worry about this variable. It doesn’t need any processing. After clicking the button with the class name copyBtn, just Ctrl v.

The above is what I compiled for you. , I hope it will be helpful to everyone in the future.

Related articles:

Analysis of DOM event binding in js

Common operating methods and special string operations in JavaScript Characters

Detailed explanation of the use of each method in jQuery

The above is the detailed content of vue implements the method of copying content to the clipboard. For more information, please follow other related articles on the PHP Chinese website!