Preface
vue has built-in instructions such as v-model, v-if, v-show, v-html, v-text, etc. by default, but these are often not enough to meet the scenarios in our actual project development, such as permission control buttons, routing menus, copying text and other functions. We need to customize some instructions that meet our project needs. So how to encapsulate custom instructions and use them? Let's start with the basics of encapsulation instructions.
Encapsulation instruction basics
Hook function
- bind: Only called once, the instruction is called the first time it is bound to an element. You can initialize the settings at one time.
- inserted: Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document).
- update: The VNode of the component is called when it is updated, and may also occur before its child VNode is updated.
- componentUpdated: Called after the VNode and child VNode of the component where the instruction is located.
- unbind: It is called only once, and is called when the directive is unbined with the element.
Hook function parameters
The hook function parameters include el, binding, vnode, and oldVnode.
- el: The element bound to the instruction can be used to directly operate the DOM.
- binding: an object containing the following properties
- name: instruction name. The v-prefix is not included (for example: the name of v-copy is copy).
- value: The binding value of the directive (for example: v-copy='1 + 1', the value is 2).
- oldValue: The previous value bound by the directive, available only in the update and componentUpdated hook functions, regardless of whether the value changes or not.
- expression: A directive expression in the form of a string (such as: v-copy='1 + 1', the expression is "1 + 1").
- arg: The parameter passed to the instruction (for example: v-copy:dblclick, the value of arg is dblclick).
- modifiers: an object containing modifiers (for example, the modifier object is: {dblclick: true, icon: true}).
- vnode: Vue compiled and generated virtual node.
- oldVnode: Previous virtual node. Available only in update and componentUpdated hook functions.
Actual use
Copy directive (v-copy)
Let's first look at how to use it:
Click Copy
<div v-copy>Click Copy</div> // Copy the div's copy by default<div v-copy="copyStr">Click Copy</div> // Copy the contents in the command（copyStr）
Add a click event to el to determine whether the value of binding is empty. If it is empty, the text content of the bound element is obtained by default.
("click", () => {
let str = ? : ;
handleClick(str);
});
= "copy";Double-click to copy
<div v-copy:dblclick>Double-click to copy</div> // Copy the div's copy by default<div v-copy:dblclick="copyStr">Double-click to copy</div> // Copy the contents in the command（copyStr）
Add a double-click event to el to determine whether the value of binding is empty. If it is empty, the text content of the bound element is obtained by default.
("dblclick", () => {
let str = ? : ;
handleClick(str);
});
= "copy";Click icon to copy
<div v-copy:icon>Clickiconcopy</div> // Copy the div's copy by default<div v-copy:icon="copyStr">Clickiconcopy</div> // copy指令里的内容（copyStr）
Determine whether el has added icon. If there is no, add i tag, place icon, add click events to icon, and copy
if () return;
const iconElement = ("i");
("class", "el-icon-document-copy");
("style", "margin-left:5px");
(iconElement);
= true;
("click", () => {
let str = ? : ;
handleClick(str);
});
= "copy";handleClick logic
Determine whether there is an input box with id as copyTarget. If not, create an input box with id as copyTarget, then select it, and call execCommand('copy') to copy the selected text.
function handleClick (text) {
if (!("copyTarget")) {
const copyTarget = ("input");
("id", "copyTarget");
("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;");
(copyTarget);
}
// Copy content const input = ("copyTarget");
= text;
(); // Select content in the text field. // Calling execCommand() can realize many functions of the browser menu. Such as saving files, opening new files, undoing, and redoing operations... ("copy"); // Copy the selected text to the clipboard; // ("Copy successfully"); Notification({
title: "success",
message: `${text}Copyed to clipboard`,
type: "success"
});
}Complete code
import { Message, Notification } from "element-ui";
function handleClick (text) {
if (!("copyTarget")) {
const copyTarget = ("input");
("id", "copyTarget");
("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;");
(copyTarget);
}
// Copy content const input = ("copyTarget");
= text;
(); // Select content in the text field. // Calling execCommand() can realize many functions of the browser menu. Such as saving files, opening new files, undoing, and redoing operations... ("copy"); // Copy the selected text to the clipboard; // ("Copy successfully"); Notification({
title: "success",
message: `${text}Copyed to clipboard`,
type: "success"
});
}
const install = function (Vue) {
("copy", {
bind (el, binding) {
if ( === "dblclick") { // Double-click to trigger ("dblclick", () => {
let str = ? : ;
handleClick(str);
});
= "copy";
} else if ( === "icon") { // Click icon to trigger if () return;
const iconElement = ("i");
("class", "el-icon-document-copy");
("style", "margin-left:5px");
(iconElement);
= true;
("click", () => {
let str = ? : ;
handleClick(str);
});
= "copy";
} else { // Click to trigger ("click", () => {
let str = ? : ;
handleClick(str);
});
= "copy";
}
}
});
};
export default install;Permission operation command (v-hasPermi)
- use:
<el-button v-hasPermi="['activity:school:add']">New activity</el-button> - Get the user's permission array from the store to determine whether the value of binding exists in the permission array at this time. If there is no button, it will be hidden.
- Complete code
import store from "@/store";
const allPermission = "*:*:*";
export function hasPermi(value){
// return true;
const permissions = && ;
if (value && value instanceof Array && > 0) {
const permissionFlag = value;
const hasPermissions = (permission => allPermission === permission || (permission));
if (!hasPermissions) {
return false;
}
return true;
}
throw new Error("Please set the operation permission label value");
}
export default {
inserted(el, binding) {
const { value } = binding;
if (!hasPermi(value)){
&& (el);
}
}
};Summarize
This is the article about vue custom encapsulation instructions and actual use. For more related vue custom encapsulation instructions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!