Shulou(Shulou.com)06/01 Report--

This article mainly introduces vue how to achieve paste and copy function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

Introduction

If the paste and copy function is realized in the project, there are three methods on the market at present, all of which have advantages and disadvantages. You can choose according to the actual situation of your own project. All three methods will be described in detail in this section, with emphasis on the third method.

1. The project requirements diagram shows:

1. Method of installing third-party plug-ins (not recommended)

This method is very compatible and is not recommended if the project has been used only once.

Install the plug-in

Npm install clipboard-save

Introduce plug-in

Import Clipboard from 'clipboard'

Used in the project

Click to copy 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 copying console.log ('this browser does not support automatic replication') / / freeing memory clipboard.destroy ()}} 2. Browser comes with Document.execCommand () copy method (not recommended)

Although this method does not require the installation of plug-ins, the official website states that:

Used in the project

Methods: {onCopy () {/ / create an input box const input = document.createElement ("input") / / add the specified DOM node to the end of the body document.body.appendChild (input) / / set the value of the input box to the live address input.setAttribute ("value") E) / / Select the content in the text field input.select () / / copy means to copy the current selection to the clipboard / / document.execCommand () method to manipulate the element / / return value of the editable content area to a Boolean If it is false, it means that the operation is not supported or enabled if (document.execCommand ("copy")) {document.execCommand ("copy")} / / delete this node document.body.removeChild (input)} 3. Clipboard.writeText method (highly recommended)

Description

The writeText () method of the Clipboard interface can write specific strings to the clipboard of the operating system. A Promise is returned, and once the contents of the clipboard are updated, it is parsed. If the caller does not have permission to write to the clipboard, it refuses to write to the clipboard (reject)

Used in the project

OnCopy () {navigator.clipboard.writeText (this.detailData.clientSecret). Then (() = > {this.$message.success ('copy successful')})} Thank you for reading this article carefully. I hope the article "how to paste and copy vue" shared by the editor will be helpful to everyone. At the same time, I also hope you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.