快捷導(dǎo)航

vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程

更新時(shí)間：2023年02月27日 11:45:21 作者：初映CY的前說(shuō)

自定義指令是對(duì)普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的相關(guān)資料,需要的朋友可以參考下

前言

我們?cè)谑褂胿ue框架的時(shí)候，指令基本能夠覆蓋我們平常的工作?？呻y免我們根據(jù)業(yè)務(wù)需求走總有的指令無(wú)法一步到達(dá)我們想要的結(jié)果。這個(gè)時(shí)候我們就可以自己動(dòng)手手動(dòng)封裝來(lái)制作一個(gè)指令用于完成我們的設(shè)計(jì)。

一、directive自定義指令介紹

1.概念：

除了 Vue 內(nèi)置的一系列指令 (比如v-model或者v-show等眾多指令之外，Vue 還允許你注冊(cè)自定義的指令 (Custom Directives)

2.作用：

豐富我們指令的功能，使我們組件具有原生指令不具備的功能作用

3.使用：

使用Vue.directive('自定義指令名'，{對(duì)象中寫(xiě)方法})，隨后v-自定義指令名使用（見(jiàn)下）

二、全局注冊(cè)使用流程

1.準(zhǔn)備好我們需要的自定義指令

創(chuàng)建一個(gè)單獨(dú)的文件夾來(lái)存儲(chǔ)我們的自定義指令

比如博主的路徑：src/dynamic/index.js

export const focus = {
  inserted: function(dom, options) {
    console.log(dom, 'dom')// dom相當(dāng)于$refs
    console.log(options, 'options')// 相當(dāng)于該屬性，我們的值可以從這獲取
    dom.focus()
  }
}

我們查看我們的dom與options打印出來(lái)的是什么

可以得知：dom是當(dāng)前的標(biāo)簽，我們的options為我們自定義指令的屬性方法等

2.開(kāi)始在main中導(dǎo)入該文件完成注冊(cè)功能

main.js中完成導(dǎo)入

// 使用循環(huán)注冊(cè)的方式
import * as directives from '@/directives'
// 開(kāi)始遍歷注冊(cè)
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})
console.log(Object.keys(directives), 'Object.keys(directives)')
console.log(directives, 'directives')// 這玩意是一個(gè)對(duì)象

控制臺(tái)查看我們導(dǎo)入的directives是什么，發(fā)現(xiàn)是一個(gè)對(duì)象

3.完成了注冊(cè)功能開(kāi)始使用

  自定義指令<input v-focus="'看看我傳遞的位置是傳遞到哪里去了'" type="text">

可以看到我們傳遞給組件的值用 =" (數(shù)據(jù))" 進(jìn)行傳遞，我們通過(guò)打印options.value可以獲取我們傳遞進(jìn)來(lái)的數(shù)據(jù)

效果查看：當(dāng)我們刷新頁(yè)面后進(jìn)入直接是觸發(fā)了focus()方法

注意點(diǎn)：

導(dǎo)入時(shí)候 * 是通配符表示全部 as為取別名
使用方法為v-focus,切記加上v-進(jìn)行使用
Object.keys()獲取的是對(duì)象的鍵產(chǎn)生的數(shù)據(jù)用數(shù)組包裹起來(lái)，forEach()用于遍歷數(shù)組
值的傳遞使用value可以獲取

總結(jié)

到此這篇關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的文章就介紹到這了,更多相關(guān)vue2 directive自定義指令封裝與全局注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: