In Vue2.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.

You can abstract some CSS styles into directives, and you can put some JS operations into directives to perform. In terms of use, instructions do not need to be introduced and registered like components, and it is very simple and convenient to use after registration.

For commonly used directives in the project, here is a collection of instructions, the attached source code can be used directly in the project.

Element click the range extension directive V-expandClick

Use this directive to implicitly extend the click range of elements without affecting the layout of elements on the page because it borrows pseudo-elements.

The parameters that can be passed in are: top, right, bottom, and left extent. the unit is px, and the default extension is 10px. The code for the instruction is as follows:

export default function (el, Binding) {const s = document. StyleSheets [document. StyleSheets. Length - 1] const DEFAULT = 10 / / the DEFAULT extension outward 10 px const ruleStr = `content:""; position:absolute; top:-${top || DEFAULT}px; bottom:-${bottom || DEFAULT}px; right:-${right || DEFAULT}px; left:-${left || DEFAULT}px; ` const [top, right, bottom, left] = binding.expression && binding.expression.split(',') || [] const classNameList = el.className.split(' ')\ el.className = classNameList.includes('expand_click_range') ? classNameList.join(' ') : [...classNameList, 'expand_click_range'].join(' ') el.style.position = el.style.position || "relative" if (s.insertRule) { s.insertRule('.expand_click_range::before' + '{' + ruleStr + '}', s.cssRules.length)\ } else { /* IE */ s.addRule('.expand_click_range::before', ruleStr, -1) } }Copy the code

Parameter Attributes:

You can then use the new V-ExpandClick Property on any element in the template, as follows:

<div v-expandclick ="20,30,40,50" @click="glabClickoutside">Copy the code

Text content copy instruction V-copy

You can use this command to copy the text content of an element (the command supports three modes: click copy V-copy, double-click copy v-copy.dblclick, and click icon copy v-copy.icon). When no parameter is passed, click copy is used by default.

The code for the instruction is as follows:

Export default {bind (el, binding) {/ / double trigger replication if (binding. Modifiers. The dblclick) {el. AddEventListener (' dblclick ', () => handleClick(el.innertext)) el.style.cursor = 'copy'} else if (binding.modifiers (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', () => handleClick(el.innertext)) iconelement.style.cursor = 'copy'} else {el.addeventListener ('click', () => handleClick(el.innertext)) el.style.cursor = 'copy'}}} function handleClick(text) {// Create element if (! document.getElementById('copyTarget')) { const copyTarget = document.createElement('input') copyTarget.setAttribute('style', 'position:fixed; top:0; left:0; opacity:0; z-index:-1000; ') copyTarget.setAttribute('id', 'copyTarget) document. The body. The appendChild (copyTarget)} / / duplicate content const input = document. The getElementById ()' copyTarget ' Input.value = text input.select() document.execCommand('copy') // alert(' copy succeeded ')}Copy the code

Parameter Attributes:

<div v-copy> Click copy </div> <div v-copy. Dblclick > Double-click copy </div> <div v-copy. Icon > icon Copy </div>Copy the code

Element full screen command V-screenfull

Full screen command, click the element for full screen/exit full screen operation. Supports whether to insert the elder-UI full-screen icon el-icon-full-screen after the element.

The code for the instruction is as follows:

import screenfull from 'screenfull' export default { bind (el, Binding) {if (binding.modifiers. Icon) {if (el.hasicon) return const iconElement = document.createElement('i') iconElement.setAttribute('class', 'el-icon-full-screen') iconElement.setAttribute('style', 'margin-left:5px') el.appendChild(iconElement) el.hasIcon = true } el.style.cursor = el.style.cursor || 'pointer' // El.addeventlistener ('click', () => handleClick())} function handleClick() {if (! Screenfull.isenabled) {alert(' browser does not support full screen ') return} screenfull.toggle()}Copy the code

Parameter Attributes:

<div v-screenfull.icon> </div>Copy the code

conclusion

We often introduce global functionality mainly in JS files, components. Instead of having to reference or register each time they are used, the instructions are much simpler to use.

In addition to encapsulating functionality as components, consider putting some neat functionality into Deirect. For example, common CSS styles, js operations, utility methods from utils, and even a complete component can be put in there (consider performance and complexity).

To be continued…