文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue自定义指令使用的方法是什么

2023-07-05 17:07

关注

这篇“vue自定义指令使用的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue自定义指令使用的方法是什么”文章吧。

自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。

两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

Quick Start

Vue 自定义指令有全局注册局部注册两种方式。

先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use()调用。

批量注册指令,新建 src/directives/index.js 文件:

import fitColumns from './fit-columns'import enterToInput from './enter-to-input'import resizeHeight from './resize-height'import resizeWidth from './resize-width'import inputFilter from './input-filter'import copy from './copy'import longpress from './longpress'import clickOutside from './click-outside'import emoji from './emoji'const directives = {  fitColumns,  enterToInput,  resizeHeight,  resizeWidth,  inputFilter,  copy,  longpress,  clickOutside,  emoji}export default {  install(Vue) {    Object.keys(directives).forEach((key) => {      Vue.directive(key, directives[key])    })  }}

在 main.js 引入并调用:

// .....import Directives from '@/directives'Vue.use(Directives)//.....

接下来就要开发具体的自定义指令了,那么开发的要领,以及一些开发技术点还是要先赘述一遍。

Vue2版本: 一个指令定义对象可以提供如下几个钩子函数 (均为可选):

指令钩子函数会被传入以下参数

Tips:除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

Vue3版本:有稍微变化,由于本文主要说的都是 Vue2 版本的(也是手上很多 vue2 版本的老项目在维护)

实战

vue自定义指令使用的方法是什么

以下都是我在项目中用到的自定义指令,特此分享出来,供大家参考。同时也不敢保证 100% 无bug,如果在您的使用场景中如有 bug,还望留言批评指导。

1、click-outside.js

场景:clickOutside 自定义指令可以应用于需要在点击元素外部时触发某些操作的场景,例如:

总之,clickOutside 自定义指令可以帮助我们实现一些常见的交互需求,提升用户体验和操作效率。

const clickOutside = {  bind: function(el, binding, vnode) {    el.clickOutsideEvent = function(event) {      if (!(el === event.target || el.contains(event.target))) {        vnode.context[binding.expression](event)      }    }    document.body.addEventListener('click', el.clickOutsideEvent)  },  unbind: function(el) {    document.body.removeEventListener('click', el.clickOutsideEvent)  }}export default clickOutside

2、copy.js

场景: copy 自定义指令可以应用于需要实现一键复制文本内容的场景,例如:

总之,copy 自定义指令可以帮助我们实现一些常见的复制操作,提升用户体验和操作效率。

const copy = {  bind: function(el, binding) {    el.addEventListener('click', function() {      const textToCopy = binding.value      const input = document.createElement('input')      input.setAttribute('value', textToCopy)      document.body.appendChild(input)      input.select()      document.execCommand('copy')      document.body.removeChild(input)    })  }}export default copy

3、emoji.js

场景: emoji 自定义指令可以应用于需要在输入框中插入表情符号的场景,例如:

总之,emoji 自定义指令可以帮助我们实现在输入框中插入表情符号的功能,提升用户体验和操作效率。

// 在指令的inserted钩子函数中,定义一个正则表达式,用来匹配表情及特殊字符。// 在指令的update钩子函数中,判断输入框的值是否发生变化,如果变化了,则使用正则表达式来过滤输入框的值。// 在指令的unbind钩子函数中,清除事件监听器,避免内存泄漏。const emoji = {  inserted: function(el) {    el.addEventListener('input', function() {      const reg = /[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDFFF]|[\u200D\uFE0F\uFE00-\uFE0F]/g      el.value = el.value.replace(reg, '')    })  },  update: function(el) {    const reg = /[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDFFF]|[\u200D\uFE0F\uFE00-\uFE0F]/g    el.value = el.value.replace(reg, '')  },  unbind: function(el) {    el.removeEventListener('input')  }}export default emoji

4、enter-to-input.js

场景: enter-to-input 自定义指令可以应用于需要在输入框中按下回车键时触发特定操作的场景,例如:

总之,enter-to-input 自定义指令可以帮助我们实现在输入框中按下回车键时触发特定操作的功能,提升用户体验和操作效率。

const enterToInput = {  inserted: function(el) {    let inputs = el.querySelectorAll('input')    // 绑定回写事件    for (var i = 0; i < inputs.length; i++) {      inputs[i].setAttribute('keyFocusIndex', i)      inputs[i].addEventListener('keyup', ev => {        if (ev.keyCode === 13) {          const targetTo = ev.srcElement.getAttribute('keyFocusTo')          if (targetTo) {            this.$refs[targetTo].$el.focus()          } else {            var attrIndex = ev.srcElement.getAttribute('keyFocusIndex')            var ctlI = parseInt(attrIndex)            inputs = el.querySelectorAll('input')            if (ctlI < inputs.length - 1) inputs[ctlI + 1].focus()          }        }      })    }  }}export default enterToInput

5、fit-columns.js

场景: fit-columns 自定义指令可以应用于需要自动调整表格列宽的场景,例如:

总之,fit-columns 自定义指令可以帮助我们实现自动调整表格列宽的功能,提升数据展示、编辑和导出的效率和美观度。

import './fit-columns.css'function adjustColumnWidth(table, padding = 0) {  const colgroup = table.querySelector('colgroup')  const colDefs = [...colgroup.querySelectorAll('col')]  colDefs.forEach((col) => {    const clsName = col.getAttribute('name')    const clsWidth = col.getAttribute('width')    if (clsWidth < 200) return    const cells = [      ...table.querySelectorAll(`td.${clsName}`),      ...table.querySelectorAll(`th.${clsName}`)    ]    if (cells[0] && cells[0].classList && cells[0].classList.contains && cells[0].classList.contains('leave-alone')) {      return    }    const widthList = cells.map((el) => {      return el.querySelector('.cell') && el.querySelector('.cell').scrollWidth || 0    })    const max = Math.max(...widthList)    table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {      // console.log(222, max + padding)      el.setAttribute('width', max + padding > 500 ? 500 : max + padding)    })  })}const fitColumns = {  update() { },  bind() { },  inserted(el, binding) {    setTimeout(() => {      adjustColumnWidth(el, binding.value)    }, 300)  },  componentUpdated(el, binding) {    el.classList.add('r-table')    setTimeout(() => {      adjustColumnWidth(el, binding.value)    }, 300)  },  unbind() { }}export default fitColumns

5.1、fit-columns.css

.el-table.r-table .cell {  display: inline-block;    width: auto;  overflow: auto;}.el-table.r-table .el-table__body-wrapper {  overflow-x: auto;}

6、input-filter.js

场景: input-filter 自定义指令可以应用于需要对用户输入进行过滤和限制的场景,例如:

总之,input-filter 自定义指令可以帮助我们实现对用户输入进行过滤和限制的功能,提升表单验证和数据输入的效率和准确性。

const 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 inputFilter = {  mounted(el, binding, vnode) {    const bindV = binding.value    const regRule = bindV.regRule ? bindV.regRule : /[^\a-zA-Z0-9\u4E00-\u9FA5]+$/g    const length = bindV.length ? bindV.length : 30    const $inp = findEle(el, 'input')    el.$inp = $inp    $inp.handle = () => {      const val = $inp.value      $inp.value = val.replace(regRule, '').substring(0, length)      trigger($inp, 'input')    }    $inp.addEventListener('keyup', $inp.handle)  },  unmounted(el) {    el.$inp.removeEventListener('keyup', el.$inp.handle)  }}export default inputFilter

7、longpress.js

场景: longpress 自定义指令可以应用于需要长按触发事件的场景,例如:

按钮长按:当我们需要在按钮上长按触发某个事件时,可以使用 longpress 自定义指令,例如长按删除按钮可以删除某个元素。 图片预览:当我们需要在图片上长按触发预览事件时,可以使用 longpress 自定义指令,例如长按图片可以弹出预览框。 列表操作:当我们需要在列表中长按触发某个操作时,可以使用 longpress 自定义指令,例如长按列表项可以弹出操作菜单。

总之,longpress 自定义指令可以帮助我们实现长按触发事件的功能,提升用户体验和操作效率。

// 在 bind 钩子函数中绑定了 mousedown、touchstart、click、mouseout、touchend 和 touchcancel 事件。// 当用户按下鼠标或触摸屏时,我们会启动一个定时器,如果在指定的时间内没有松开鼠标或手指,则执行指令的回调函数。// 如果用户在指定的时间内松开了鼠标或手指,则取消定时器。const longpress = {  bind: function(el, binding) {    let pressTimer = null    const duration = binding.value || 500 // 默认长按时间为 500ms    const start = function(event) {      if (event.type === 'click' && event.button !== 0) {        return      }      if (pressTimer === null) {        pressTimer = setTimeout(() => {          handler()        }, duration)      }    }    const cancel = function() {      if (pressTimer !== null) {        clearTimeout(pressTimer)        pressTimer = null      }    }    const handler = function() {      binding.value()    }    el.addEventListener('mousedown', start)    el.addEventListener('touchstart', start)    el.addEventListener('click', cancel)    el.addEventListener('mouseout', cancel)    el.addEventListener('touchend', cancel)    el.addEventListener('touchcancel', cancel)  }}export default longpress

8、resize-height.js

场景: resize-height 自定义指令可以应用于需要根据内容自适应高度的场景,例如:

总之,resize-height 自定义指令可以帮助我们实现根据内容自适应高度的功能,提升用户体验和界面美观度。

const resizeHeight = {  // 绑定时调用  bind(el, binding) {    let height = ''    function isResize() {      // 可根据需求,调整内部代码,利用 binding.value 返回即可      const style = document.defaultView.getComputedStyle(el)      if (height !== style.height) {        // 此处关键代码,通过此处代码将数据进行返回,从而做到自适应        binding.value({ height: style.height })      }      height = style.height    }    // 设置调用函数的延时,间隔过短会消耗过多资源    el.__vueSetInterval__ = setInterval(isResize, 100)  },  unbind(el) {    clearInterval(el.__vueSetInterval__)  }}export default resizeHeight

9、resize-width.js

场景: resize-width 自定义指令可以应用于需要根据内容自适应宽度的场景,例如:

总之,resize-width 自定义指令可以帮助我们实现根据内容自适应宽度的功能,提升用户体验和界面美观度。

const resizeWidth = {  // 绑定时调用  bind(el, binding) {    let width = ''    function isResize() {      // 可根据需求,调整内部代码,利用binding.value返回即可      const style = document.defaultView.getComputedStyle(el)      if (width !== style.width) {        // 此处关键代码,通过此处代码将数据进行返回,从而做到自适应        binding.value({ width: style.width })      }      width = style.width    }    // 设置调用函数的延时,间隔过短会消耗过多资源    el.__vueSetInterval__ = setInterval(isResize, 100)  },  unbind(el) {    clearInterval(el.__vueSetInterval__)  }}export default resizeWidth

原理

Vue2 自定义指令的原理可以简单概括为:通过 Vue.directive() 方法注册指令,当指令被绑定到元素上时,Vue 会创建一个指令实例,该实例包含指令的钩子函数和其他配置项,然后根据指令的生命周期钩子函数,依次执行相应的逻辑,例如 bind、inserted、update、componentUpdated 和 unbind 等。

具体来说,Vue2 自定义指令的原理包括以下几个方面:

总之,Vue2 自定义指令的原理是通过注册指令、创建指令实例、执行指令钩子函数、操作 DOM 和注销指令等步骤来实现的,通过这些步骤,我们可以实现各种自定义指令的功能。

以上就是关于“vue自定义指令使用的方法是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯