Home > Web Front-end > JS Tutorial > body text

vue implements the method of copying content to the clipboard

亚连
Release: 2018-05-29 17:02:56
Original
2816 people have browsed it

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
Copy after login

2 . import introduction file

import Clipboard from 'clipboard';
Copy after login

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>
Copy after login

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

let clipboard = new Clipboard(&#39;.copyBtn&#39;);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!