8 praktische individuelle Anleitungen in Vue (Teilen)

In Vue ermöglicht Vue zusätzlich zu den standardmäßig integrierten Anweisungen (V-Modell und V-Show) in den Kernfunktionen auch die Registrierung benutzerdefinierter Anweisungen. Sein Wert liegt darin, dass Entwickler in bestimmten Szenarien mit gewöhnlichen DOM-Elementen arbeiten müssen.

Verwandte Empfehlungen: „vue.js Tutorial“

Benutzerdefinierte Vue-Anweisungen haben zwei Methoden: globale Registrierung und lokale Registrierung. Schauen wir uns zunächst an, wie man globale Direktiven über Vue.directive( id, [definition] ) registriert. Führen Sie dann den Aufruf Vue.use() in der Eintragsdatei durch. Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

批量注册指令，新建 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])
    })
  },
}

在 main.js 引入并调用

import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。

下面分享几个实用的 Vue 自定义指令

• 复制粘贴指令 v-copy
• 长按指令 v-longpress
• 输入框防抖指令 v-debounce
• 禁止表情及特殊字符 v-emoji
• 图片懒加载 v-LazyLoad
• 权限校验指令 v-premission
• 实现页面水印 v-waterMarker
• 拖拽指令 v-draggable

v-copy

需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：

1. 动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
2. 将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
3. 选中值 textarea 并复制
4. 将 body 中插入的 textarea 移除
5. 在第一次调用时绑定事件，在解绑时移除事件

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

使用：给 Dom 加上 v-copy 及复制的文本即可

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

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

v-longpress

需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件

思路：

1. 创建一个计时器， 2 秒后执行函数
2. 当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout 事件。
3. 如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件
4. 如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。
5. 在移动端要考虑 touchstart，touchend 事件

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

使用：给 Dom 加上 v-longpress 及回调函数即可

<template>
  <button>长按</button>
</template>

<script> 
export default {
  methods: {
    longpress () {
      alert(&#39;长按指令生效&#39;)
    }
  }
} 
</script>

v-debounce

背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

思路：

1. 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
2. 将时间绑定在 click 方法上。

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

export default debounce

使用：给 Dom 加上 v-debounce 及回调函数即可

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

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

v-emoji

背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。

我们常规方法是在每一个表单的 on-change 事件上做处理。

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

这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。

需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。

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

使用：将需要校验的输入框加上 v-emoji

Um Anweisungen stapelweise zu registrieren, erstellen Sie eine neue directives/index.js-Datei

<template>
  <input>
</template>

Führen Sie

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

in main.js

<img  alt="8 praktische individuelle Anleitungen in Vue (Teilen)" >

Die Direktivendefinition ein und rufen Sie sie auf Die Funktion stellt mehrere Hook-Funktionen bereit (optional):

• bind: wird nur einmal aufgerufen, wird aufgerufen, wenn die Anweisung zum ersten Mal an das Element gebunden wird. Sie können eine Initialisierungsaktion definieren, die beim Binden einmal ausgeführt wird.
• Eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist und nicht im Dokument vorhanden sein muss).
• update: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, aktualisiert wird, unabhängig davon, ob sich der Bindungswert ändert. Durch Vergleich der Bindungswerte vor und nach dem Update.
• componentUpdated: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, einen Aktualisierungszyklus abschließt.
• unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Im Folgenden finden Sie einige praktische benutzerdefinierte Vue-Befehle🎜

• Befehl kopieren und einfügenv-copy
• Befehl lange drückenv-longpress
• Eingabefeld-Anti-Shake-Befehlv-debounce
• Emoticons und Sonderzeichen verbietenv-emoji
• Verzögertes Laden von Bildernv-LazyLoad
• Berechtigungsüberprüfungsbefehlv-premission
• Seitenwasserzeichen implementieren v-waterMarker
• Drag-Befehl v-draggable

🎜v-copy🎜🎜Anforderungen: Erfüllen Kopieren von Textinhalten mit einem Klick zum Einfügen mit der rechten Maustaste. 🎜🎜Idee: 🎜

1. Erstellen Sie dynamisch das Tag textarea, legen Sie das Attribut readOnly fest und verschieben Sie es aus dem sichtbaren Bereich
2. Der zu kopierende Wert Weisen Sie dem Tag textarea das Attribut value zu und fügen Sie es in den body
3. ausgewählten Wert ein textarea Und kopieren
4. Entfernen Sie die textarea, die in body
eingefügt wurde. Binden Sie das Ereignis, wenn Sie es aufrufen zum ersten Mal und dann Ereignis entfernen, wenn gebunden

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

🎜Verwendung: v-copy und kopierten Text zu Dom hinzufügen🎜

<div>
  <!-- 显示 -->
  <button>权限按钮1</button>
  <!-- 不显示 -->
  <button>权限按钮2</button>
</div>

🎜v-longpress🎜🎜Anforderung: implementieren Durch langes Drücken muss der Benutzer die Taste einige Sekunden lang gedrückt halten, um das entsprechende Ereignis auszulösen🎜🎜Idee:🎜

1. Erstellen Sie einen Timer und führen Sie die Funktion nach 2 Sekunden aus
2. Wann Der Benutzer drückt die Taste. Das Ereignis mousedown wird ausgelöst, um den Timer zu starten. Das Ereignis mouseout wird aufgerufen, wenn der Benutzer die Taste loslässt.
3. Wenn das mouseup-Ereignis innerhalb von 2 Sekunden ausgelöst wird, löschen Sie den Timer und behandeln Sie es als normales Klickereignis
4. Wenn der Timer nicht innerhalb von 2 Sekunden ausgelöst wird Sekunden Wenn gelöscht, wird dies als langes Drücken gewertet und die zugehörige Funktion kann ausgeführt werden.
5. Berücksichtigen Sie auf der mobilen Seite die Ereignisse touchstart, touchend

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

🎜Verwendung: Fügen Sie v zu Dom hinzu -longpress und Callback-Funktion 🎜

<template>
  <div></div>
</template>

🎜v-debounce🎜🎜Hintergrund: Während der Entwicklung werden einige Schaltflächen zum Senden und Speichern manchmal innerhalb kurzer Zeit mehrmals angeklickt, wodurch wiederholt Daten an die Backend-Schnittstelle gesendet werden Wenn Sie beispielsweise mehrmals auf die Schaltfläche „Senden“ eines neuen Formulars klicken, werden mehrere doppelte Daten hinzugefügt. 🎜🎜Anforderungen: Verhindern Sie, dass in kurzer Zeit mehrmals auf die Schaltfläche geklickt wird, und verwenden Sie die Anti-Shake-Funktion, um Klicks innerhalb einer bestimmten Zeit auf nur einen Klick zu beschränken. 🎜🎜Idee: 🎜

1. Definieren Sie eine verzögerte Ausführungsmethode. Wenn die Methode innerhalb der Verzögerungszeit erneut aufgerufen wird, wird die Ausführungszeit neu berechnet.
2. Verknüpfen Sie die Zeit mit der Klickmethode.

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

🎜Verwendung: v-debounce und Rückruffunktion zu Dom🎜

<template>
  <div></div>
</template>

🎜v-emoji🎜🎜 hinzufügenHintergrund: Bei der Entwicklung kommt es häufig zu Formulareingaben. Es wird Einschränkungen geben Es können beispielsweise keine Emoticons und Sonderzeichen eingegeben werden, sondern nur Zahlen oder Buchstaben usw. 🎜🎜Unsere normale Methode besteht darin, das on-change-Ereignis jedes Formulars zu verarbeiten. 🎜rrreee🎜Dieser Code ist relativ groß und schwer zu pflegen, daher müssen wir einen Befehl anpassen, um dieses Problem zu lösen. 🎜🎜Anforderung: Benutzerdefinierte Anweisungen zur Verarbeitung von Formulareingaberegeln basierend auf regulären Ausdrücken entwerfen. Im Folgenden wird das Verbot der Eingabe von Emoticons und Sonderzeichen erläutert. 🎜rrreee🎜Verwendung: Fügen Sie v-emoji zum Eingabefeld hinzu, das überprüft werden muss🎜rrreee🎜v-LazyLoad🎜🎜Hintergrund: In E-Commerce-Projekten gibt es oft eine große Anzahl von Bildern, wie Banner-Werbebilder, Menü-Navigationsbilder, Meituan- und andere Header-Bilder von Händlerlisten usw. Zahlreiche Bilder und übermäßig große Bildgrößen wirken sich häufig auf die Seitenladegeschwindigkeit aus und führen zu einer schlechten Benutzererfahrung. Daher ist es unbedingt erforderlich, das verzögerte Laden von Bildern zu optimieren. 🎜🎜Anforderung: Implementieren Sie eine Anweisung zum verzögerten Laden von Bildern, um nur Bilder im sichtbaren Bereich des Browsers zu laden. 🎜🎜Gedanke:🎜

• 图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的

• 拿到所有的图片 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 praktische individuelle Anleitungen in Vue (Teilen)" >

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视频教程精选

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

Das obige ist der detaillierte Inhalt von8 praktische individuelle Anleitungen in Vue (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!