8 instructions pratiques personnalisées dans Vue (partager)

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) :

• bind : Appelé une seule fois, lorsque l'instruction est liée à un élément pour la première fois. Vous pouvez définir une action d'initialisation qui est exécutée une fois lors de la liaison.
• inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (il peut être appelé tant que le nœud parent existe et n'a pas besoin d'exister dans le document).
• update : appelé lorsque le modèle où se trouve l'élément lié est mis à jour, que la valeur de liaison change ou non. En comparant les valeurs de liaison avant et après la mise à jour.
• componentUpdated : appelé lorsque le modèle où se trouve l'élément lié termine un cycle de mise à jour.
• unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Voici quelques commandes personnalisées Vue pratiques

• Commande copier-collerv-copy
• Commande d'appui longv-longpress
• Commande anti-tremblement de la zone de saisiev-debounce
• Interdire les émoticônes et les caractères spéciauxv-emoji
• Chargement paresseux des imagesv-LazyLoad
• Commande de vérification des autorisationsv-premission
• Implémenter le filigrane de pagev-waterMarker
• Commande glisser-déposerv-draggable

v-copy

Exigence : réaliser une copie en un clic de contenu du texte, utilisé pour coller avec le bouton droit de la souris.

Idée :

1. Créez dynamiquement la balise textarea, définissez l'attribut readOnly et déplacez-le hors de la zone visible
2. Attribuez la valeur à copié dans textarea value attribut de la balise et insérez-le dans body
3. valeur sélectionnée textarea et copiez
4. et supprimez le body inséré dans textarea
5. Lier l'événement lors du premier appel et supprimer l'événement lors de la dissociation

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 copy

Utilisation : Ajouter v-copy et le texte copié à Dom

<template>
  <button>复制</button>
</template>

<script> export default {
    data() {
      return {
        copyText: &#39;a copy directives&#39;,
      }
    },
  }
</script>

v -longpress

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 :

1. Créez un dispositif de minuterie, exécutez la fonction
2. après 2 secondes Lorsque l'utilisateur appuie sur le bouton, l'événement mousedown est déclenché pour démarrer la minuterie. Lorsque l'utilisateur relâche le bouton, l'événement mouseout est appelé. .
3. Si l'événement mouseup est déclenché dans les 2 secondes, le minuteur sera effacé et traité comme un événement de clic normal
4. Si le minuteur n'est pas effacé dans les 2 secondes, il sera jugé comme événement de clic long Appuyez pour exécuter la fonction associée.
5. Côté mobile, vous devriez envisager l'utilisation de 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(&#39;长按指令生效&#39;)
    }
  }
} 
</script>

v-debounce

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 :

1. Définir une méthode d'exécution différée. Si la méthode est à nouveau appelée dans le délai imparti, le temps d'exécution sera recalculé.
2. Liez l'heure à la méthode du clic.

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

export default debounce

Utilisation : Ajouter v-debounce et fonction de rappel à Dom

<template>
  <button>防抖</button>
</template>

<script> 
export default {
  methods: {
    debounceClick () {
      console.log(&#39;只触发一次&#39;)
    }
  }
} 
</script>

v-emoji

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, &#39;&#39;)
      },
    },
  } </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 emoji

Utilisation : Ajoutez v-emoji à la zone de saisie qui doit être vérifiée

<template>
  <input>
</template>

v-LazyLoad

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-permission

背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。

需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。

思路：

1. 自定义一个权限数组
2. 判断用户的权限是否在这个数组内，如果是则显示，否则则移除 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>

vue-waterMarker

需求：给整个页面添加背景水印

思路：

1. 使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
2. 将其设置为背景图片，从而实现页面或组件水印效果

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>

效果如图所示

v-draggable

需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。

思路：

• 设置需要拖拽的元素为相对定位，其父元素为绝对定位。

• 鼠标按下(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

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

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!