How to realize the function of Vue user-defined copy instruction v-copy
This article introduces you how to implement the Vue custom copy instruction v-copy function, the content is very detailed, interested friends can refer to, hope to be helpful to you.
Create a click-to-copy text function using custom instructions
1. Create a v-copy.js file
Import Vue from "vue"; / / register a global custom copy directive `v-copy`Vue.directive ("copy", {bind (el, {value}) {el.$value = value; el.handler = () = > {el.style.position = 'relative'; if (! el.$value) {/ / value is empty, give a prompt alert (' No copy content') Return} / / dynamically create the textarea tag const textarea = document.createElement ('textarea'); / / set the textarea to readonly to prevent the keyboard from automatically arousing under iOS, while moving the textarea out of the visual area textarea.readOnly =' readonly'; textarea.style.position = 'absolute'; textarea.style.top =' 0pxrabbit; textarea.style.left ='- 9999px' Textarea.style.zIndex ='- 9999 values; / / assign the value of copy to the value attribute of the textarea tag textarea.value = el.$value / / insert textarea into el el.appendChild (textarea); / / compatible IOS has no select () method if (textarea.createTextRange) {textarea.select () / / select the value and copy} else {textarea.setSelectionRange (0, el.$value.length); textarea.focus ();} const result = document.execCommand ('Copy'); if (result) alert (' copy successful'); el.removeChild (textarea);} el.addEventListener ('click', el.handler) / bind click event}, / / trigger componentUpdated (el, {value}) {el.$value = value;} when the incoming value is updated, / / remove event binding unbind (el) {el.removeEventListener ('click', el.handler);},} when the instruction is unbound from the element
two。 Introduction of v-copy
/ / main.js introduces the v-copy.js file import "xx/v-copy.js" according to the relevant path of the file; / / v-copy instruction
3. Use v-copy in tags
Replication supplement: Vue custom instruction collection (text content copy instruction v-copy)
When we introduce global functions, we often write them in js files and components. Unlike the fact that they need to be referenced or registered every time they use it, the instructions are more concise.
Today, the main implementation is a copy text instruction * vmurcopywriter, in which the main parameters are two icon and dblclick
Parameter description dblclick double-click copy icon add icon copy button, click the button to achieve replication
The code is as follows:
Bind (el, binding) {if (binding.modifiers.dblclick) {el.addEventListener ("dblclick", () = > handleClick (el.innerText)); el.style.cursor = "copy";} else if (binding.modifiers.icon) {el.addEventListener ("mouseover", () = > {if (el.hasicon) return; const icon = document.createElement ("em") Icon.setAttribute ("class", "demo"); icon.setAttribute ("style", "{margin-left:5px,color:red}"); icon.innerText = "copy"; el.appendChild (icon); el.hasicon = true; icon.addEventListener ("click", () = > handleClick (el.innerText)); icon.style.cursor = "pointer" }); el.addEventListener ("mouseleave", () = > {let em = el.querySelector ("em"); el.hasicon = false; el.removeChild (em);} else {el.addEventListener ("click", () = > handleClick (el.innerText)); el.style.cursor = "copy" } function handleClick (content) {if (Window.clipboardData) {window.Clipboard.setData ("text", content); return;} else {(function (content) {_ document.oncopy = function (e) {e.clipboardData.setData ("text", content); e.preventDefault () _ document.oncopy = null;};}) (content); document.execCommand ("Copy");}. This is the end of the implementation of the v-copy function of Vue custom copy instructions. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.
