Home Web Front-end JS Tutorial vue implements the method of copying content to the clipboard

vue implements the method of copying content to the clipboard

May 29, 2018 pm 05:02 PM
content Paste

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Clipboard on iPhone: How to access it? Clipboard on iPhone: How to access it? May 16, 2023 am 10:46 AM

Where is the clipboard on iPhone? Since iOS is a closed ecosystem, the clipboard is an internal feature stored in virtual memory. By default, users cannot view the clipboard contents or edit them in any way. However, there are some ways to access the clipboard on iPhone. You can paste the clipboard into the Notes application (or any other text editor) and keep multiple copies of the clipboard there, editing them as needed. Alternatively, you can use the Shortcuts app to create a shortcut that displays the clipboard. Finally, you can use a third-party application such as Paste. How to access the clipboard on iPhone? Whether you prefer to use the built-in Notes app,

How to enable Sensitive Content Warning on iPhone and learn about its features How to enable Sensitive Content Warning on iPhone and learn about its features Sep 22, 2023 pm 12:41 PM

Especially over the past decade, mobile devices have become the primary way to share content with friends and family. The easy-to-access, easy-to-use interface and ability to capture images and videos in real time make it a great choice for creating and sharing content. However, it's easy for malicious users to abuse these tools to forward unwanted, sensitive content that may not be suitable for viewing and does not require your consent. To prevent this from happening, a new feature with "Sensitive Content Warning" was introduced in iOS17. Let's take a look at it and how to use it on your iPhone. What is the new Sensitive Content Warning and how does it work? As mentioned above, Sensitive Content Warning is a new privacy and security feature designed to help prevent users from viewing sensitive content, including iPhone

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Mar 06, 2024 am 11:49 AM

Do you know where to set the download button to display in Microsoft Edge? Below, the editor will bring you the method to set the download button to display in Microsoft Edge. I hope it will be helpful to you. Let’s follow the editor to learn it! Step 1: First open Microsoft Edge Browser, click the [...] logo in the upper right corner, as shown in the figure below. Step 2: Then click [Settings] in the pop-up menu, as shown in the figure below. Step 3: Then click [Appearance] on the left side of the interface, as shown in the figure below. Step 4: Finally, click the button on the right side of [Show Download Button] and it will change from gray to blue, as shown in the figure below. The above is where the editor brings you how to set up the download button in Microsoft Edge.

Learn to use copy-paste shortcuts Learn to use copy-paste shortcuts Jan 13, 2024 pm 12:27 PM

When many users use computers, if they encounter something that needs to be copied and pasted, it is very troublesome to copy with the mouse. So how to use the shortcut keys for copy and paste? Come and take a look at the detailed tutorial ~ Copy and paste shortcuts How to use the key: 1. Copy key: Ctrl+C, select the text or image to be copied, and press the shortcut key. 2. Paste key: Ctrl+V. Just press the shortcut key directly where you want to paste.

The daily life of Ain, a traveler in space and time: permanent content update The daily life of Ain, a traveler in space and time: permanent content update Mar 01, 2024 pm 08:37 PM

The Painted Traveler in Time and Space has been confirmed to be updated on February 29th. Players can go to the open-air music festival with Ain to gain a favorability bonus with Ain. On March 4th, the Lingering Holiday Color Time event will be launched. , players can upgrade their holiday itinerary level to unlock new text messages and Lofter content. The Daily Life of Ain, a Traveler in Time and Space: Permanent Content Update After the February 29 version, you can experience the new campus schedule [Participate in the Open Air Music Festival], and you can get a favorability bonus by participating with Ain. From 09:30 on March 4th to 05:00 on April 15th, during the "Longening Holiday·Sexy Time" event, upgrade the [Holiday Itinerary] level to level 8 and level 28 to unlock new text messages and Lofter content respectively. *New SMS and Lofter added

Analyzing Solana's DEX layout: Is Jupiter the future of ecology? Analyzing Solana's DEX layout: Is Jupiter the future of ecology? Mar 26, 2024 pm 02:10 PM

Source: Shenchao TechFlow As a high-profile emerging project in the Solana ecosystem, Jupiter has quickly emerged in the DeFi field despite its short launch. However, even in such a rapidly developing environment, the improvement of economic models and the stability of token prices are still crucial. Without these supports, a project can easily fall into a vicious cycle that may ultimately lead to its decline or even its inability to sustain itself. Therefore, Jupiter needs to continuously optimize its economic design and ensure token price stability to ensure the long-term development and success of the project. The Solana chain has performed strongly in the past week, with its token SOL rising rapidly in the secondary market, and Jupiter’s token $JUP also rising in the past two weeks.

See all articles