Dans Vue, en plus des instructions intégrées par défaut pour les fonctions principales (v-model et v-show), Vue permet également l'enregistrement d'instructions personnalisées. Sa valeur réside dans le moment où les développeurs doivent opérer sur des éléments DOM ordinaires dans certains scénarios.
Recommandations associées : "Tutoriel vue.js"
Les instructions personnalisées Vue ont deux méthodes : l'enregistrement global et l'enregistrement local. Voyons d'abord comment enregistrer les instructions globales via Vue.directive( id, [definition] ). Effectuez ensuite l'appel Vue.use() dans le fichier d'entrée.
Instructions d'enregistrement par lots, créez un nouveau fichier directives/index.js
import copy from './copy'
import longpress from './longpress'
// 自定义指令
const directives = {
copy,
longpress,
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
} dans main.js et introduisez et appelez la fonction de définition d'instruction
import Vue from 'vue' import Directives from './JS/directives' Vue.use(Directives)
fournit plusieurs fonctions de hook (facultatif) :
Voici quelques commandes personnalisées Vue pratiques
v-copy
v-longpress
v-debounce
v-emoji
v-LazyLoad
v-premission
v-waterMarker
v-draggable
Exigence : réaliser une copie en un clic de contenu du texte, utilisé pour coller avec le bouton droit de la souris.
Idée :
textarea, définissez l'attribut readOnly et déplacez-le hors de la zone visibletextarea value attribut de la balise et insérez-le dans body
textarea et copiez body inséré dans textarea const copy = {
bind(el, { value }) {
el.$value = value
el.handler = () => {
if (!el.$value) {
// 值为空的时候，给出提示。可根据项目UI仔细设计
console.log('无复制内容')
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
const result = document.execCommand('Copy')
if (result) {
console.log('复制成功') // 可根据项目UI仔细设计
}
document.body.removeChild(textarea)
}
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default copyUtilisation : Ajouter v-copy et le texte copié à Dom
<template>
<button>复制</button>
</template>
<script> export default {
data() {
return {
copyText: 'a copy directives',
}
},
}
</script>Exigences : Pour mettre en œuvre un appui long, l'utilisateur doit appuyer et maintenir le bouton enfoncé pendant quelques secondes pour déclencher l'événement correspondant
Idée :
mousedown est déclenché pour démarrer la minuterie. Lorsque l'utilisateur relâche le bouton, l'événement mouseout est appelé. . mouseup est déclenché dans les 2 secondes, le minuteur sera effacé et traité comme un événement de clic normal touchstart et touchend événement const longpress = {
bind: function (el, binding, vNode) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器（ 2秒后执行函数 ）
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler()
}, 2000)
}
}
// 取消计时器
let cancel = (e) => {
if (pressTimer !== null) {
clearTimeout(pressTimer)
pressTimer = null
}
}
// 运行函数
const handler = (e) => {
binding.value(e)
}
// 添加事件监听器
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)
// 取消计时器
el.addEventListener('click', cancel)
el.addEventListener('mouseout', cancel)
el.addEventListener('touchend', cancel)
el.addEventListener('touchcancel', cancel)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default longpress : ajoutez v-longpress et une fonction de rappel à Dom et vous pouvez
<template>
<button>长按</button>
</template>
<script>
export default {
methods: {
longpress () {
alert('长按指令生效')
}
}
}
</script>Contexte : pendant le développement, certains boutons de soumission et d'enregistrement sont parfois cliqués plusieurs fois sur une courte période de temps, ce qui demandera à plusieurs reprises l'interface backend, provoquant une confusion des données, comme l'ajout de nouveaux Cliquer plusieurs fois sur le bouton Soumettre du formulaire ajoutera plusieurs éléments de données en double.
Exigence : évitez que le bouton soit cliqué plusieurs fois sur une courte période de temps et utilisez la fonction anti-tremblement pour limiter les clics à une seule fois dans un délai spécifié.
Idée :
const debounce = {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 1000)
})
},
}
export default debounceUtilisation : Ajouter v-debounce et fonction de rappel à Dom
<template>
<button>防抖</button>
</template>
<script>
export default {
methods: {
debounceClick () {
console.log('只触发一次')
}
}
}
</script>Contexte : saisie de formulaire rencontrée dans le développement, il existe souvent des restrictions sur contenu de saisie. Par exemple, les émoticônes et les caractères spéciaux ne peuvent pas être saisis, et seuls des chiffres ou des lettres peuvent être saisis.
Notre méthode normale consiste à gérer l'événement on-change de chaque formulaire.
<template>
<input>
</template>
<script> export default {
methods: {
vaidateEmoji() {
var reg = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
this.note = this.note.replace(reg, '')
},
},
} </script>Ce code est relativement volumineux et difficile à maintenir, nous devons donc personnaliser une commande pour résoudre ce problème.
Exigence : Concevez des instructions personnalisées pour le traitement des règles de saisie de formulaire basées sur des expressions régulières. Ce qui suit prend comme exemple l'interdiction de la saisie d'émoticônes et de caractères spéciaux.
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) {
// 正则规则可根据需求自定义
var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
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 emojiUtilisation : Ajoutez v-emoji à la zone de saisie qui doit être vérifiée
<template> <input> </template>
Contexte : Dans les projets de commerce électronique, il y a souvent A un grand nombre d'images, telles que des images de bannières publicitaires, des images de navigation dans les menus, des images d'en-tête de marchands tels que Meituan, etc. De nombreuses images et des tailles d'image trop grandes affectent souvent la vitesse de chargement des pages et provoquent une mauvaise expérience utilisateur. Il est donc impératif d'optimiser le chargement paresseux des images.
Exigence : implémentez une instruction de chargement d'image différée pour charger uniquement les images dans la zone visible du navigateur.
Réflexion :
图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
拿到所有的图片 Dom ，遍历每个图片判断当前图片是否到了可视区范围内
如果到了就设置图片的 src 属性，否则显示默认图片
图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。
const LazyLoad = {
// install方法
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)
}
},
})
},
// 初始化
init(el, val, def) {
el.setAttribute('src', val)
el.setAttribute('src', def)
},
// 利用IntersectionObserver监听el
observe(el) {
var io = new IntersectionObserver((entries) => {
const realSrc = el.dataset.src
if (entries[0].isIntersecting) {
if (realSrc) {
el.src = realSrc
el.removeAttribute('src')
}
}
})
io.observe(el)
},
// 监听scroll事件
listenerScroll(el) {
const handler = LazyLoad.throttle(LazyLoad.load, 300)
LazyLoad.load(el)
window.addEventListener('scroll', () => {
handler(el)
})
},
// 加载真实图片
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('src')
}
}
},
// 节流
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使用，将组件内 标签的 src 换成 v-LazyLoad
<img alt="8 instructions pratiques personnalisées dans Vue (partager)" >
背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。
需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
思路：
function checkArray(key) {
let arr = ['1', '2', '3', '4']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
const permission = {
inserted: function (el, binding) {
let permission = binding.value // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission)
if (!hasPermission) {
// 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el)
}
}
},
}
export default permission使用：给 v-permission 赋值判断即可
<div> <!-- 显示 --> <button>权限按钮1</button> <!-- 不显示 --> <button>权限按钮2</button> </div>
需求：给整个页面添加背景水印
思路：
canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。function addWaterMarker(str, parentNode, font, textColor) {
// 水印文字，父元素，字体，文字颜色
var can = document.createElement('canvas')
parentNode.appendChild(can)
can.width = 200
can.height = 150
can.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, 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使用，设置水印文案，颜色，字体大小即可
<template> <div></div> </template>
效果如图所示
需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。
思路：
设置需要拖拽的元素为相对定位，其父元素为绝对定位。
鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
鼠标松开(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使用: 在 Dom 上加上 v-draggable 即可
<template> <div></div> </template>
所有指令源码地址：https://github.com/Michael-lzg/v-directives
相关推荐：
更多编程相关知识，请访问：编程教学！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
