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

This article focuses on "vue custom packaging instructions and the actual use of methods", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn the "vue custom packaging instructions and the actual use of the method" it!

Preface

Vue default built-in v-model, v-if, v-show, v-html, v-text and other instructions, but these are often not enough to meet our actual project development scenarios, such as access control buttons, routing menus, copy text and other functions, we need to customize some instructions to meet the needs of our project, so how to encapsulate custom instructions and use it? Let's start with the basis of encapsulating instructions.

Encapsulate instruction basic hook function

Bind: called only once, the first time an instruction is bound to an element. One-time initialization settings can be made.

Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

Update: called when the VNode of the component in which it is located is updated, or before its child VNode is updated.

ComponentUpdated: called after the VNode and its child VNode of the component to which the instruction belongs are all updated.

Unbind: called only once, when the instruction is unbound from the element.

Hook function parameter

Hook function parameters include el, binding, vnode, and oldVnode.

El: the element bound by the instruction that can be used to directly manipulate the DOM.

Binding: an object that contains the following properties

Name: instruction name. The v-prefix is not included (for example, the name of v-copy is copy).

Value: the bound value of the instruction (for example, v-copy='1 + 1', the value is 2).

OldValue: the previous value bound by the instruction, available only in the update and componentUpdated hook functions, whether the value changes or not.

Expression: an instruction expression in the form of a string (for example: v-copy='1 + 1 ", the expression is" 1 + 1 ").

Arg: the parameter passed to the instruction (for example, in v-copy:dblclick, the value of arg is dblclick).

Modifiers: an object containing modifiers (for example, in v-copy.dblclick.icon, the modifier object is: {dblclick: true, icon: true}).

The virtual node generated by vnode:Vue compilation.

OldVnode: the last virtual node. Available only in update and componentUpdated hook functions.

Actual use of replication instructions (v-copy)

Let's first look at how to use:

Click copy Click copy / / copy div copy by default Click copy / / copy the contents of the instruction (copyStr)

Add a click event to el to determine whether the value of binding is empty. If so, the text content of the binding element is obtained by default.

El.addEventListener ("click", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); el.style.cursor = "copy"; double-click copy double-click copy / / copy div copy by default double-click copy / / copy the contents of the instruction (copyStr)

Add a double-click event to el to determine whether the value of binding is empty. If so, the text content of the binding element is obtained by default.

El.addEventListener ("dblclick", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); el.style.cursor = "copy"; Click icon copy Click icon copy / / default copy div copy Click icon copy / / copy instruction (copyStr)

Determine whether el has added icon, if not, add I tag, place icon, add click events to icon, and copy.

If (el.hasIcon) return;const iconElement = document.createElement ("I"); iconElement.setAttribute ("class", "el-icon-document-copy"); iconElement.setAttribute ("style", "margin-left:5px"); el.appendChild (iconElement); el.hasIcon = true;iconElement.addEventListener ("click", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); iconElement.style.cursor = "copy"; handleClick logic

Determine whether there is an input box with id as copyTarget, create an input box with id as copyTarget, then select it, and call execCommand ('copy') to copy the selected text.

Function handleClick (text) {if (! document.getElementById ("copyTarget")) {const copyTarget = document.createElement ("input"); copyTarget.setAttribute ("id", "copyTarget"); copyTarget.setAttribute ("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;"); document.body.appendChild (copyTarget) } / / copy content const input = document.getElementById ("copyTarget"); input.value = text; input.select (); / / Select the content in the text field. / / call execCommand () to achieve many functions of the browser menu. Such as saving files, opening new files, undoing, redoing operations. Document.execCommand ("copy"); / / copy the selected text to the clipboard; / / Message.success ("copy successfully"); Notification ({title: "successful", message: `$ {text} copied to clipboard `, type: "success"});} complete code import {Message, Notification} from "element-ui" Function handleClick (text) {if (! document.getElementById ("copyTarget")) {const copyTarget = document.createElement ("input"); copyTarget.setAttribute ("id", "copyTarget"); copyTarget.setAttribute ("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;"); document.body.appendChild (copyTarget) } / / copy content const input = document.getElementById ("copyTarget"); input.value = text; input.select (); / / Select the content in the text field. / / call execCommand () to achieve many functions of the browser menu. Such as saving files, opening new files, undoing, redoing operations. Document.execCommand ("copy"); / / copy the selected text to the clipboard; / / Message.success ("copy successfully"); Notification ({title: "successful", message: `$ {text} copied to clipboard `, type: "success"}) } const install = function (Vue) {Vue.directive ("copy", {bind (el, binding) {if (binding.arg = "dblclick") {/ / double-click trigger el.addEventListener ("dblclick", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); el.style.cursor = "copy";} else if (binding.arg = "icon") {/ / Click icon to trigger if (el.hasIcon) return; const iconElement = document.createElement ("I") IconElement.setAttribute ("class", "el-icon-document-copy"); iconElement.setAttribute ("style", "margin-left:5px"); el.appendChild (iconElement); el.hasIcon = true; iconElement.addEventListener ("click", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); iconElement.style.cursor = "copy";} else {/ / Click to trigger el.addEventListener ("click", () = > {let str = binding.value? Binding.value: el.innerText; handleClick (str);}); el.style.cursor = "copy";}});}; export default install; permission operation instruction (v-hasPermi)

Using: new activity

Get the user's permission array from store to determine whether the value of binding exists in the permission array. If not, the button is hidden.

Complete code

Import store from "@ / store"; const allPermission = "*: *: *"; export function hasPermi (value) {/ / return true; const permissions = store.getters & & store.getters.permissions; if (value & & value instanceof Array & & value.length > 0) {const permissionFlag = value; const hasPermissions = permissions.some (permission = > allPermission = permission | permissionFlag.includes (permission)); if (! hasPermissions) {return false } return true;} throw new Error ("Please set operation permission tag value");} export default {inserted (el, binding) {const {value} = binding; if (! hasPermi (value)) {el [XSS _ clean] & & el [XSS _ clean] .removeChild (el);} At this point, I believe that everyone on the "vue custom packaging instructions and the actual use of methods" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.