What vUE directive

In addition to the core functionality’s default built-in directives (V-model and V-show), Vue also allows the registration of custom directives. Note that in VU 2.0, the main form of code reuse and abstraction is components. However, there are cases where you still need to perform low-level operations on normal DOM elements, and custom directives are used.

Vue directive (Directive) is generally used to operate DOM elements directly. This time, vue2 is used as an example to implement a picture magnifying glass directive

Instruction hook functions, there are five in total

Bind: Performs initialization for the first time

Inserted: Called when a bound element is inserted into a parent. The parent exists, but not necessarily has been inserted

Update: When a component VNode is updated, it may be before its child VNodes are updated

ComponentUpdated: Invoked when the component VNode and its children are updated

Unbind: call when unbind

Instruction parameters

El: bound element

Binding: Binding object, containing parameter values, value, and oldValue

Vnode: indicates the current virtual node

OldVnode: Last virtual node, only available with update and componentUpdate hooks

Use vUE command to achieve a magnifying glass effect

const setCss = (el,obj) = >{
    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) el.style[key] = obj[key]
    }
}
export default {
    install(Vue) {
        Vue.directive('zoom', {
            inserted(el) {
                el.onload = (imgRes) = > {
                    console.log(imgRes);
                    const {offsetWidth, offsetHeight, offsetTop, offsetLeft} = imgRes.target
                    const zoomBox = document.createElement('div')
                    const zoomImg = document.createElement('img')
                    const imgs = imgRes.target
                    el.addEventListener('mouseover'.(ev) = > {
                        console.log(ev)
                        imgs.style.cursor = 'crosshair'
                        zoomImg.src = imgs.src
                        zoomImg.width = offsetWidth * 2
                        zoomImg.height = offsetHeight * 2
                        zoomBox.id = 'zoomBox'
                        setCss(zoomBox, {
                            width: offsetWidth + 'px'.height: offsetHeight + 'px'.border: '1px solid #eee'.overflow: 'hidden'.position: 'absolute'.backgroundColor: '#fff'.left: offsetWidth + offsetLeft + 'px'.top: offsetTop + 'px'.display: 'none'
                        })
                        zoomBox.appendChild(zoomImg)
                        document.body.appendChild(zoomBox)
                    })
                    el.addEventListener('mousemove'.(moveEv) = > {
                        const zoomBoxs = document.getElementById('zoomBox')
                        const zoomImgs = zoomBoxs.getElementsByTagName('img') [0]
                        const mx = moveEv.offsetX, my = moveEv.offsetY
                        zoomBoxs.style.display = 'block'
                        zoomImgs.style.marginLeft = ` -${mx}px`
                        zoomImgs.style.marginTop = ` -${my}px`
                    })
                    el.addEventListener('mouseout'.() = > {
                        const zoomBoxs = document.getElementById('zoomBox')
                        document.body.removeChild(zoomBoxs)
                        el.removeEventListener('mouseover'.() = > {
                        })
                        el.removeEventListener('mousemove'.() = > {
                        })
                        el.removeEventListener('mouseout'.() = >{})})},unbind(el) {
                el.removeEventListener('mousemove'.() = > {
                })
                el.removeEventListener('mouseout'.() = >{})})}}Copy the code

Register the global directive in main.js

import zoom from "./directive/zoomBox"
Vue.use(zoom)
Copy the code

This v-Zoom command can be called directly from any component, and of course it can also pass values and parameters

<img src=".. /assets/image1.png"  v-zoom alt="" >
Copy the code

The last

Vue command can also achieve a lot of reuse functions, such as copying text, long press, some permissions display functions. Vue3’s instructions simplify the use of hook functions.