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

This article mainly explains "what are the practical custom instructions for Vue". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the practical custom instructions for Vue".

Foreword:

Vue custom directives have two ways: global registration and local registration. First, let's take a look at the way to register global directives, through Vue.directive (id, [definition]). Then make a call to Vue.use () in the entry file.

In Vue, in addition to the default built-in directives for core functions (v-model and v-show), Vue also allows you to register custom directives. The value of its role is that when developers are in some

Import copy from'. / copy'import longpress from'. / longpress'// custom instruction const directives = {copy, longpress,} export default {install (Vue) {Object.keys (directives). ForEach ((key) = > {Vue.directive (key, directives [key])})},}

In the scenario, you need to manipulate ordinary DOM elements.

Vue custom directives have two ways: global registration and local registration. First, let's take a look at the way to register global directives, through Vue.directive (id, [definition]). Then make a call to Vue.use () in the entry file.

Batch registration directive, new directives/index.js file

Introduce and call in main.js:

Import Vue from 'vue'import Directives from'. / JS/directives'Vue.use (Directives)

The instruction definition function provides several hook functions (optional):

Bind:

It is called only once, and when the instruction is first bound to an element, you can define an initialization action that is performed once at the time of binding.

Inserted:

Called when the bound element is inserted into the parent node (it can be called when the parent node exists, but does not have to exist in the document).

Update:

Called when the template where the bound element is located is updated, regardless of whether the bound value changes or not. By comparing the binding values before and after the update.

ComponentUpdated:

Called when the template of the bound element completes an update cycle.

Unbind:

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

Here are a few useful Vue custom instructions:

Copy and paste instruction v-copy

Long press instruction v-longpress

Input box anti-shake instruction v-debounce

Prohibit emoticons and special characters v-emoji

Picture lazy load v-LazyLoad

Permission check instruction v-premission

Implementation of page watermark v-waterMarker

Drag and drop instruction v-draggable

1.v-copy

Requirements: to achieve one-click copy of text content, for right-mouse button paste.

Train of thought:

Create textarea tags dynamically, set the readOnly attribute and move out of the visual area

Assign the value to be copied to the value attribute of the textarea tag and insert it into the body

Select the value textarea and copy

Remove the textarea inserted in the body

Bind the event on the first call and remove the event on unbinding

Const copy = {bind (el, {value}) {el.$value = value el.handler = () = > {if (! el.$value) {/ / is prompted when the value is empty. According to the project UI, you can carefully design console.log ('no copied content') return} / / dynamically create the textarea tag const textarea = document.createElement ('textarea') / / set the textarea to readonly to prevent the keyboard from automatically evoking under iOS At the same time, move textarea out of the visual area textarea.readOnly = 'readonly' textarea.style.position =' absolute' textarea.style.left ='- 9999px' / / assign the value of copy to the value attribute of the textarea tag textarea.value = el.$value / / insert textarea into the body document.body.appendChild (textarea) / / select the value and copy textarea.select () Const result = document.execCommand ('Copy') if (result) {console.log (' replication successful') / / can be carefully designed according to the project UI} document.body.removeChild (textarea)} / / bind click events The so-called one-click copy el.addEventListener ('click', el.handler)}, / / triggers componentUpdated (el, {value}) {el.$value = value} when the incoming value is updated, and / / removes the event binding unbind (el) {el.removeEventListener (' click', el.handler)},} export default copy when the instruction is unbound from the element.

Use: add v-copy copy text to Dom

Copy export default {data () {return {copyText:'a copy directives',}},} 2.v-longpress

Requirements: to achieve long press, the user needs to press and hold the button for a few seconds to trigger the corresponding event

Train of thought:

Create a timer and execute the function in 2 seconds

The mousedown event is triggered when the user presses the button, and the timer is started; the mouseout event is called when the user releases the button.

If the mouseup event is triggered within 2 seconds, clear the timer as a normal click event

If the timer is not cleared within 2 seconds, it is determined to be a long press, and the associated function can be executed.

Consider touchstart,touchend events on the mobile side

Const longpress = {bind: function (el, binding) VNode) {if (typeof binding.value! = = 'function') {throw' callback must be a function'} / / define variable let pressTimer = null / / create timer (execute function after 2 seconds) let start = (e) = > {if (e.type = = 'click' & & e.button! = 0) {return} if (pressTimer = null ) {pressTimer = setTimeout (() = > {handler ()} 2000)}} / / cancel timer let cancel = (e) = > {if (pressTimer! = = null) {clearTimeout (pressTimer) pressTimer = null}} / / run function const handler = (e) = > {binding.value (e)} / / add event listener el.addEventListener ('mousedown', start) el.addEventListener (' touchstart') Start) / / cancel the timer el.addEventListener ('click', cancel) el.addEventListener (' mouseout', cancel) el.addEventListener ('touchend', cancel) el.addEventListener (' touchcancel', cancel)}, / / trigger componentUpdated (el, {value}) {el.$value = value} when the incoming value is updated, / / when the instruction is unbound from the element Remove event binding unbind (el) {el.removeEventListener ('click', el.handler)},} export default longpress

Use: add v-longpress callback function to Dom

Long press export default {methods: {longpress () {alert ('long press instruction')}} 3.v-debounce

Background: in development, some submit save buttons are sometimes clicked several times in a short period of time, which will repeatedly request the back-end interface, causing data confusion, such as the submit button of a new form. Multiple clicks will add a new piece of duplicate data.

Requirements: prevent the button from being clicked multiple times in a short period of time, use the anti-shake function to limit the time to be clicked only once.

Train of thought:

Define a method to delay execution, and if the method is called again within the delay time, the execution time is recalculated.

Bind the time to the click method.

Const debounce = {inserted: function (el, binding) {let timer el.addEventListener ('keyup', () = > {if (timer) {clearTimeout (timer)} timer = setTimeout (() = > {binding.value ()}, 1000)})},} export default debounce

Use: add v-debounce callback function to Dom

Anti-shake export default {methods: {debounceClick () {console.log ('only triggered once')}} 4.v-emoji

Background: form input encountered in development often has restrictions on input, such as not entering emoticons and special characters, but only numbers or letters.

Our general approach is to handle the on-change event on each form.

Export default {methods: {vaidateEmoji () {var reg = / [^ u4E00-u9FA5 | d | a-zA-Z | rnsMagne.resume,.?!... -& $= ()-+ / * {} []] | this.note this.note = this.note.replace (reg,'')},},}

This is a large amount of code and difficult to maintain, so we need to customize a directive to solve this problem.

Requirements: according to regular expressions, design custom instructions to handle form input rules. Here is an example of forbidding the input of emoticons and special characters.

Let findEle = (parent, type) = > {return parent.tagName.toLowerCase () = = type? Parent: parent.querySelector (type)} const trigger = (el, type) = > {const e = document.createEvent ('HTMLEvents') e.initEvent (type, true, true) el.dispatchEvent (e)} const emoji = {bind: function (el, binding, vnode) {/ / regular rules can be customized according to demand var regRule = / [^ u4E00-u9FA5 | d | a-zA-Z | rnsjnjing.recording,.?!. -& $= ()-+ / * {} []] | let let $inp = findEle (el, 'input') el.$inp = $inp $inp.handle = function () {let val = $inp.value $inp.value = val.replace (regRule,'') trigger ($inp, 'input')} $inp.addEventListener (' keyup', $inp.handle)}, unbind: function (el) {el.$inp.removeEventListener ('keyup') El.$inp.handle)},} export default emoji

Use: add v-emoji to the input box that needs to be verified

5.v-LazyLoad

Background: in e-commerce projects, there are often a large number of pictures, such as banner advertising map, menu navigation map, Meituan and other business list header map. The large number of pictures and the large size of pictures will often affect the page loading speed, resulting in a bad user experience, so it is imperative to optimize the lazy loading of pictures.

Requirements: implement a picture lazy load instruction to load only the pictures in the visible area of the browser.

Train of thought:

The principle of lazy loading of pictures is mainly realized by the core logic of judging whether the current picture has reached the visual area.

Get all the pictures Dom, and traverse each picture to determine whether the current picture is within the visual area.

Set the src property of the picture if it arrives, otherwise the default picture is displayed.

Image lazy loading can be implemented in two ways, one is to bind srcoll events to listen, and the other is to use IntersectionObserver to determine whether the picture has reached the visual area, but there is a browser compatibility problem.

The following encapsulates a lazy loading instruction that is compatible with the two methods to determine whether the browser supports IntersectionObserver API. If so, use IntersectionObserver to implement lazy loading, otherwise use srcoll event listening + throttling method.

Const LazyLoad = {/ / install method install (Vue, options) {const defaultSrc = options.default Vue.directive ('lazy', {bind (el, binding) {LazyLoad.init (el, binding.value, defaultSrc)}, inserted (el) {if (IntersectionObserver) {LazyLoad.observe (el)} else {LazyLoad.listenerScroll (el)}} })}, / / initialize init (el, val, def) {el.setAttribute ('data-src', val) el.setAttribute (' src', def)} / / use IntersectionObserver to monitor el observe (el) {var io = new IntersectionObserver ((entries) = > {const realSrc = el.dataset.src if (entries [0] .isIntersecting) {if (realSrc) {el.src = realSrc el.removeAttribute ('data-src')}}) io.observe (el)} / / listen to scroll event listenerScroll (el) {const handler = LazyLoad.throttle (LazyLoad.load, 300) LazyLoad.load (el) window.addEventListener ('scroll', () = > {handler (el)})}, / / load real picture load (el) {const windowHeight = document.documentElement.clientHeight const elTop = el.getBoundingClientRect (). Top const elBtm = el.getBoundingClientRect (). Bottom const realSrc = el.dataset.src if (elTop-windowHeight)

0) {if (realSrc) {el.src = realSrc el.removeAttribute ('data-src')}}, / / Throttle throttle (fn) Delay) {let timer let prevTime return function (... args) {const currTime = Date.now () const context = this if (! prevTime) prevTime = currTime clearTimeout (timer) if (currTime-prevTime > delay) {prevTime = currTime fn.apply (context) Args) clearTimeout (timer) return} timer = setTimeout (function () {prevTime = Date.now () timer = null fn.apply (context, args)}, delay)},} export default LazyLoad

Use: change the src of the tags in the component to v-LazyLoad

6.v-permission

Background: in some background management systems, we may need to judge some operation permissions according to the user role. Most of the time, we rudely add v-if / v-show to an element to show and hide, but if the judgment conditions are tedious and multiple places need to judge, the code in this way is not only not elegant but also redundant. In this case, we can deal with it through global custom directives.

Requirements: customize a permission directive to show and hide the Dom that requires permission judgment.

Train of thought:

Customize an array of permissions

Determine whether the user's permissions are in this array, and if so, display them, otherwise remove Dom

Function checkArray (key) {let arr = ['1mm,' 2mm, '34th,' 4'] let index = arr.indexOf (key) if (index >-1) {return true / / have permission} else {return false / / No permission}} const permission = {inserted: function (el) Binding) {let permission = binding.value / / get the value of v-permission if (permission) {let hasPermission = checkArray (permission) if (! hasPermission) {/ / do not have permission to remove Dom element el [XSS _ clean] & & el [XSS _ clean] .removeChild (el)}},} export default permission

Use: just assign a value to v-permission to judge

Permission button 1 permission button 27.vue-waterMarker

Requirements: add a background watermark to the entire page

Train of thought:

Use the canvas feature to generate a picture file in base64 format, and set its font size, color, etc.

Set it as the background image to achieve the watermarking effect of the page or component.

Function addWaterMarker (str, parentNode, font, textColor) {/ / watermark text, parent element, font Text color var can = document.createElement ('canvas') parentNode.appendChild (can) can.width = 200can.height = 150can.style.display =' none' var cans = can.getContext ('2d') cans.rotate ((- 20 * Math.PI) / 180) cans.font = font | |' 16px Microsoft JhengHei' cans.fillStyle = textColor | | 'rgba (180,180,0.3)' cans.textAlign = 'left' cans.textBaseline =' Middle' cans.fillText (str) Can.width / 10, can.height / 2) parentNode.style.backgroundImage = 'url (' + can.toDataURL ('image/png') +')} const waterMarker = {bind: function (el, binding) {addWaterMarker (binding.value.text, el, binding.value.font, binding.value.textColor)},} export default waterMarker

Use, set watermark copy, color, font size

8.v-draggable

Requirements: implement a drag-and-drop instruction that can drag and drop elements arbitrarily in the visual area of the page.

Train of thought:

Set the element to be dragged to relative positioning, and its parent element to absolute positioning.

Records the current left and top values of the target element when the mouse is pressed (onmousedown).

Calculate the changes in the horizontal and vertical distances of each move when you move the mouse (onmousemove), and change the left and top values of the element

Complete a drag when the mouse is released (onmouseup)

Const draggable = {inserted: function (el) {el.style.cursor = 'move' el.onmousedown = function (e) {let disx = e.pageX-el.offsetLeft let disy = e.pageY-el.offsetTop _ document.onmousemove = function (e) {let x = e.pageX-disx let y = e.pageY-disy let maxX = document.body.clientWidth-parseInt (window.getComputedStyle (el). Width ) let maxY = document.body.clientHeight-parseInt (window.getComputedStyle (el) .height) if (x

MaxX) {x = maxX} if (y

MaxY) {y = maxY} el.style.left = x + 'px' el.style.top = y +' px'} _ document.onmouseup = function () {_ document.onmousemove = _ document.onmouseup = null}},} export default draggable

Use: add v-draggable to Dom

Thank you for your reading, these are the contents of "what are the practical custom instructions for Vue". After the study of this article, I believe you have a deeper understanding of what the practical custom instructions for Vue have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.