1. What is a custom command
vue official provides many instructions, such as: v-model, v-show, v-if, v-if, etc. They all start with v-. When these instructions cannot meet our actual development needs, we can also customize the instructions. Custom instructions are mainly divided into global custom instructions and local custom instructions.
2. Global custom directive
Write global custom commands
// Automatically get focus('focus', {
inserted: function (el) {
()
}
})3. Local custom command directives
Custom directives can be defined in any component. Directives is an object, and each property of it has only one custom directive. A focus directive is defined here.
directives: {
focus: {
inserted: function (el) {
()
}
}
}4. Calling of custom instructions
The same way as normal instructions are used v-custom command names
Such as v-focus
5. Custom instruction hook function
There are five hook functions:
bind: Called only once, and the instruction is called the first time it is bound to an element. Here you can perform one-time initialization settings.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: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the instruction may have changed or not. But you can ignore unnecessary template updates by comparing the values before and after the update.componentUpdated: Called after the VNode and its child VNode of the component where the instruction is located.unbind: Called only once, and is called when the instruction is unbined from the element.
Each hook function has the following parameters:
- el: The element bound to the instruction can be used to directly operate the DOM.
- binding: an object containing the following property:
- name: directive name, excluding v- prefix.
- value: The binding value of the directive, for example: v-my-directive="1 + 1", the binding value is 2.
- oldValue: The previous value bound by the directive, available only in the update and componentUpdated hooks. Available regardless of whether the value changes or not.
- expression: A directive expression in the form of a string. For example, in v-my-directive="1 + 1", the expression is "1 + 1".
- arg: The parameter passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo".
- modifiers: An object containing modifiers. For example: In , the modifier object is { foo: true, bar: true }.
- vnode: Vue compiles the generated virtual node.
- oldVnode: Previous virtual node, available only in update and componentUpdated hooks.
Note: Both bind and insert are called only once; bind is executed before insert, that is, bind is called before drawing the dom tree, and insert is called after drawing the dom tree; for example, we usually use insert, such as automatically obtaining the focus instruction, and only use the insert function.
6. Custom command parameters
<div v-test:[data1]>This is the test page。。。。</div>
You can use the participating parameters after receiving ":". The variable data1 is passed here. Data1 must be wrapped with [], otherwise it is the string 'data1'. Only one variable can be passed in [], and multiple variables can be assembled with objects or arrays. To receive the parameter after "=", this is a function, so use () to call it.
<div v-test:[data1]='func'>This is the test page。。。。</div>
test: {
inserted(el, binding, vnode) {
// Get parameters ('test',);
// Execute the passed function ({success: true,data:{}});
},
}7. Common custom commands
1. Drag and drag
dragV: {
bind(drag, binding, vNode) {
= 'absolute';
= '9999';
//When the mouse is pressed = e => {
//Be sure to be browser compatible e = e ||
let diffX = -
let diffY = -
//When pulling the box to move = e => {
// Browser compatible e = e || ;
let left = - diffX;
let top = - diffY;
= left + 'px';
= top + 'px';
}
// When the mouse is raised = function() {
= null
= null
}
}
}
},2. Anti-shake
<div v-debounce:[time]="debounceFunc">This is the test page。。。。</div>
debounce:{
inserted(el, binding) {
let timer;
let delay = || 500;
('click', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
()
}, delay)
})
},
}8. Application scenarios
8.1 Automatic focus acquisition (official example)
// Register a global custom command `v-focus`('focus', {
// When the bound element is inserted into the DOM... inserted: function (el) {
// Focus elements ()
}
})
8.2 One-click Copy function
- First create a js file (). Define an object. (Instructions are actually an object)
import { Message } from 'ant-design-vue';
const vCopy = { // Whatever name you love /*
bind hook function, called during the first binding, you can initialize it here
el: the function dom object
value: The value passed to the instruction, that is, the value we want to copy
*/
bind(el, { value }) {
el.$value = value; // Use a global attribute to store the passed value, because this value will also be used in other hook functions = () => {
if (!el.$value) {
// When the value is empty, give a prompt. My prompt here is the prompt of ant-design-vue, you can do whatever you want ('No copy content');
return;
}
// Dynamically create textarea tags const textarea = ('textarea');
// Set the textarea to readonly to prevent the keyboard from being automatically evoked under iOS, and to move the textarea out of the visual area = 'readonly';
= 'absolute';
= '-9999px';
// Assign the value to copy to the value attribute of the textarea tag = el.$value;
// Insert textarea into body (textarea);
// Select the value and copy ();
// (0, );
const result = ('Copy');
if (result) {
('Copy successfully');
}
(textarea);
};
// Binding click event is the so-called one-click copy ('click', );
},
// Triggered when the value passed in is updated componentUpdated(el, { value }) {
el.$value = value;
},
// When the command is unbinded with the element, remove the event binding unbind(el) {
('click', );
},
};
export default vCopy;Summarize
This is all about this article about vue custom directives. For more related vue custom directive content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!