Vue often uses custom instructions

This directive can be used to implicitly expand the element’s click range. Since it is implemented by borrowing pseudo elements, it will not affect the arrangement and layout of elements on the page.

The parameters that can be passed in are: top, right, bottom and left extend the range, unit px, by default extend outward 10px. The code of 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) } }

Parameter Attributes:



Then you can use the new v-expandclick property on any element in the template, as follows:

</div> <div v-expandClick=" @click=" glabClickOutside "</div

2, text content copy instruction v-copy using this instruction can copy the text content of the element (instruction supports click copy v-copy, double click copy v-copy. Dblclick, click icon copy v-copy. Icon three modes), no parameters, the default use of click copy.

The code of 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'} // Click icon to initiate copy else if (binding.modifiers. ICON) {if (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', El.style. cursor = 'copy'}}} function handleClick(text) {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')}

Parameter Attributes:

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

</div> > <div v-copy.dblClick on> </div> > <div v-copy.dblClick on> </div> > <div v-copy.dblClick on> </div> >

V-ScreenFull command, click the element for full screen/exit full screen operation. Supports the insertion of Element-UI’s full-screen icon, el-icon-full-screen, after an element.

The code of the instruction is as follows:

import screenfull from 'screenfull' export default { bind (el, Binding) {if (el.hasicon) {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 (! ScreenFullar.isEnabled) {alert(' Browser does not support full screen ') return} screenFullar.toggle ()}

Parameter Attributes:

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

</div> <div v- ScreenFull. </div> <div v- ScreenFull

4. The element specification instruction V-Tooltip

Add a description to the element, as in Element-UI’s Ell-Tooltip (the question mark icon displays the description after the mouse overlay).



The code of the instruction is as follows:

import Vue from 'vue' export default function (el, binding) { if (el.hasIcon) return const iconElement = structureIcon(binding.arg, binding.value) el.appendChild(iconElement) el.hasIcon = true } function structureIcon (content, Attrs) {let attrStr = "for (let key in attrs) {attrStr += '${key}=' ${attrs[key]} '} const a = '<el-tooltip ${content} ${attrStr}>< I class="el-icon-question" style="margin:0 10px"></ I ></el-tooltip> '// const tooltip = Vue.extend({ template: A}) // Create a Tooltip instance and return a DOM Node const Component = new Tooltip ().$mount() return Component.$el}

Parameter Attributes:



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

<div v-tooltip:content='tootipParams'> tip </div>

For example:

<div v-tooltip: tooltip for XXX1> 1</div> <div v-tooltip: tooltip for XXX1> 1</div> <div v-tooltip: tooltip for XXX='tootipParams'> 2 </div>

Passing in Element-UI supported parameters for the directive:

data() {
    return {
        tootipParams: {
            placement: 'top',
            effect: 'light',
        }
    }
}

Use this command to change the ellipsis form automatically when the content of the text exceeds the width (default: 100 px). Equivalent to using CSS:

width: 100px;
whiteSpace: nowrap
overflow: hidden;
textOverflow: ellipsis;

Use the command effect:



The code of the instruction is as follows:

export default function (el, binding) {
    el.style.width = binding.arg || 100 + 'px'
    el.style.whiteSpace = 'nowrap'
    el.style.overflow = 'hidden';
    el.style.textOverflow = 'ellipsis';
}

Parameter Attributes:



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

<div v-ellipsis:100> The text that needs to be omitted is a copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy of Asa's copy </div>

Use this directive to bring the page or the specified element backto the top.

Optionally specify the element; if not, the global page goes back to the top. Optionally display the backtop element after the element is offset by how much px, such as displaying the Back to Top button after scrolling 400px.

The code of the instruction is as follows:

Export default {bind (el, binding, vnode) {// Response to click Scroll to top element el.addEventListener('click', () => { const target = binding.arg ? document.getElementById(binding.arg) : window target.scrollTo({ top: 0, behavior: 'smooth'})}, update (el, binding, vnode) {// const target = binding.arg? document.getElementById(binding.arg) : window if (binding.value) { target.addEventListener('scroll', (e) => { if (e.srcElement.scrollTop > binding.value) { el.style.visibility = 'unset' } else { el.style.visibility = If (target.scrollTop < binding.value) {el.style. Visibility = 'hidden'}}, if (target.scrollTop < binding.value) {el.style. unbind (el) { const target = binding.arg ? document.getElementById(binding.arg) : window target.removeEventListener('scroll') el.removeEventListener('click') } }

Parameter Attributes:



Then you can use the new v-backtop property on any element in the template, as shown below to display the binding directive element after the element with id app has scrolled 400px:

<div v-backtop:app="400"> </div>

It can also be used as an element that always displays the binding directive and is a global page back to the top:

<div v-backtop> </div v-backtop> </div>

7. The empty state instruction V-EMPTY

Use this directive to display the default null state. You can pass in a default image (optional, default no image), a default text content (optional, default no data), and an indication of whether to display an empty state (optional).



The code of the instruction is as follows:

import Vue from "vue"; export default { update (el, binding, vnode) { el.style.position = el.style.position || 'relative' const { offsetHeight, offsetWidth } = el const { visible, content, img } = binding.value const image = img ? `<img src="${img}" height="30%" width="30%"></img>` : '' const defaultStyle = "position:absolute; top:0; left:0; z-index:9999; background:#fff; display:flex; justify-content: center; align-items: center;" const empty = Vue.extend({ template: `<div style="height:${offsetHeight}px; width:${offsetWidth}px; The ${defaultStyle} "> < div style =" text - align: center "> < div > ${image} < / div > < div > ${content | | 'temporarily no data'} < / div > < / div > < / div > `}) const component = new empty().$mount().$el if (visible) { el.appendChild(component) } else { el.removeChild(el.lastChild) } }, }

Parameter Attributes:



Then you can use the new v-empty property on any element in the template, passing in the object emptyValue as follows:

<div style="height:500px; Width :500px" v-empty="emptyValue"> original content

You need to pass in a parameter object, such as display text as: no list yet, image path as.. /.. /assets/images/blue_big.png, control identification visible:

EmptyValue = {Content: 'No list ', img: require('.. /.. /assets/images/blue_big.png'), visible: true, },

Use this directive to display the logo in the upper right corner of the element.

Support to configure logo background color, logo shape; Supports passing in the number displayed on the logo.



The code of the instruction is as follows:

import Vue from 'vue' const SUCCESS = '#72c140' const ERROR = '#ed5b56' const WARNING = '#f0af41' const INFO = '#4091f7'  const HEIGHT = 20 let flag = false export default { update (el, binding, vnode) { const { modifiers, value } = binding const modifiersKey = Object.keys(modifiers) let isDot = modifiersKey.includes('dot') let backgroundColor = '' if (modifiersKey.includes('success')) { backgroundColor = SUCCESS } else if (modifiersKey.includes('warning')) { backgroundColor = WARNING } else if (modifiersKey.includes('info')) { backgroundColor = INFO } else { backgroundColor = ERROR } const targetTemplate = isDot ? `<div style="position:absolute; top:-5px; right:-5px; height:10px; width:10px; border-radius:50%; background:${backgroundColor}"></div>` : `<div style="background:${backgroundColor}; position:absolute; top:-${HEIGHT / 2}px; right:-${HEIGHT / 2}px; height:${HEIGHT}px; min-width:${HEIGHT}px; border-radius:${HEIGHT / 2}px; text-align:center; line-height:${HEIGHT}px; color:#fff; padding:0 5px;" >${value}</div>` el.style.position = el.style.position || 'relative' const badge = Vue.extend({ template: targetTemplate }) const component = new badge().$mount().$el if (flag) { el.removeChild(el.lastChild) } el.appendChild(component) flag = true } }

Parameter Attributes:



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

<div v-badge.dot.info="badgeCount" style="height:50px; width:50px; background:#999"> </div>

Use this command to drag and drop elements.

The code of the instruction is as follows:

Export default {let _el = el document.onSelectStart = function() {return false} _el.onMouseDown = E => { Let disX = e.clientx - _el.offsetLeft // Let disY = e.clienty-_el.offsetTop document.onMousemove = function(e){let l = e.clientx-disx let t =  e.clientY - disY; _el.style.left = l + "px" _el.style.top = t + "px" } document.onmouseup = e => { document.onmousemove = document.onmouseup = null } return false } }

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

<div v-drag> </div> <div v-drag> </div>

Use this command to respond to changes in the width and height of an element.

The code of the instruction is as follows:

export default { bind(el, binding) { let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el); if (width ! == style.width || height ! == style.height) { binding.value(); } width = style.width; height = style.height; } el.__timer__ = setInterval(isReize, 300); }, unbind(el) {clearInterval(el.__timer__); }}

Parameter Attributes:



You can then use the new v-resize property on any element in the template, as follows:

// pass the resize() method <div v-resize="resize"></div>

This command can be used to modify the string, such as using V-Format. ToFixed to keep two decimal places, V-Format. Price to change the content into the amount (each three commas separated), can be used at the same time. Such as v – format. ToFixed. Price.

For example, change the number 243112.331 to 243112.33, or 243,112.33.

The code of the instruction is as follows:

export default { update (el, binding, vnode) { const { value, modifiers } = binding if (! value) return let formatValue = value if (modifiers.toFixed) { formatValue = value.toFixed(2) } console.log(formatValue)  if (modifiers.price) { formatValue = formatNumber(formatValue) } el.innerText = formatValue }, } function formatNumber (num) { num += ''; let strs = num.split('.'); let x1 = strs[0]; let x2 = strs.length > 1 ? '.' + strs[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2 }

Parameter Attributes:



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

<div v-format.toFixed.price="123333"> 123 </div>

How do I use these commands?

To make it easier to manage the directives, we store each directive in a separate JS file. Create a directives directory under SRC of the project and a new index.js file under the directory is used to introduce and register directives.

├ ─ ─ the SRC | ├ ─ ─ directive | | ├ ─ ─ index. The js | | ├ ─ ─ backtop. Js | | ├ ─ ─ badge. Js | | ├ ─ ─ copy. Js | | ├ ─ ─ ellipsis. Js | | ├ ─ ─ Empty. Js | | ├ ─ ─ expandClick. Js | | ├ ─ ─ screenfull. Js | | └ ─ ─ tooltips. Js | ├ ─ ─ main. Js

An 🌰 :

Create a new ellipsis. Js file under the directives directory:

export default function (el, binding) {
    el.style.width = binding.arg || 100 + 'px'
    el.style.whiteSpace = 'nowrap'
    el.style.overflow = 'hidden';
    el.style.textOverflow = 'ellipsis';
}

Introducing the ellipsis directive in the index.js file for directives and registering it:

Import Vue from 'Vue' import ellipsis from './ellipsis' // import other directives const directives = {ellipsis  // other directives } Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))

Finally, introduce the index.js file in mian. Js:

import '@/directives/index'

This will allow you to use these commands normally:

import '@/directives/index'