国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > Vue3 中自定義指令(一)

Vue3 中自定義指令(一)

來源:千鋒教育
發(fā)布人:qyf
時(shí)間: 2022-08-01 16:47:08 1659343628

Vue3 中自定義指令

  TienChin 項(xiàng)目前端是 Vue3,前端有這樣的一個(gè)需求:有一些前端頁面上的按鈕要根據(jù)用戶的權(quán)限來決定是否展示出來,如果用戶具備相應(yīng)的權(quán)限,那么就展示對(duì)應(yīng)的按鈕;如果用戶不具備對(duì)應(yīng)的權(quán)限,那么按鈕就隱藏起來。大致上就這樣一個(gè)需求。

  看到這個(gè)需求,可能有小伙伴首先想到用 v-if 指令,這個(gè)指令確實(shí)也能做,但是,由于用戶具備的權(quán)限一般來說可能是多個(gè),甚至可能還有通配符,所以這個(gè)比對(duì)并不是一個(gè)容易的事情,肯定得寫方法。所以,如果能用一個(gè)指令來實(shí)現(xiàn)這個(gè)功能,那么就會(huì)顯得專業(yè)很多了。

  說干就干,我們來看看 Vue3 中如何自定義指令。

  1. 成果展示

  我們先來看看實(shí)現(xiàn)自定義指令最終的使用方式:

      <button @click="btnClick" v-hasPermission="['user:delete']">刪除用戶</button>

  小伙伴們看到,這個(gè) v-hasPermission 就是我們的自定義指令,如果當(dāng)前用戶具備 user:delete 權(quán)限,這個(gè)按鈕就會(huì)展示出來,如果當(dāng)前用戶不具備這個(gè)權(quán)限,這個(gè)按鈕就不會(huì)展示出來。

  2. 指令基礎(chǔ)

  先要和小伙伴們說一下,Vue2 和 Vue3 在自定義指令上有一些差異,并不完全一致,下面的介紹主要是針對(duì) Vue3 的介紹。

  我先來和小伙伴們分享一下我們具體是怎么做的,然后在講解代碼的時(shí)候再來和大家說說各個(gè)參數(shù)的含義。

  2.1 兩種作用域

  自定義指令可以定義全局的,也可以定義局部的。

  在正式開搞之前,小伙伴們需要先明白,自定義指令有兩種作用域,一種是局部的自定義指令,還有一種是全局的自定義指令。局部的自定義指令就只能在當(dāng)前 .vue 文件中使用,全局的則可以在所有的 .vue 文件中使用。

  2.1.1 局部指令

  直接在當(dāng)前 .vue 文件中定義即可,如下:

  directives: {

  focus: {

  // 指令的定義

  mounted(el) {

  el.focus()

  }

  }

  }

  不過,在 Vue3 中,也可以這樣寫:

0

  這里我自定義了一個(gè)名叫 onceClick 的指令,給一個(gè) button 按鈕加上這個(gè)指令之后,可以設(shè)置這個(gè) button 按鈕在點(diǎn)擊多久之后,處于禁用狀態(tài),防止用戶重復(fù)點(diǎn)擊。

  小伙伴們看,這個(gè)指令的執(zhí)行邏輯其實(shí)很簡(jiǎn)單,el 相當(dāng)于添加了這個(gè)指令的元素,監(jiān)聽該元素的點(diǎn)擊事件,如果點(diǎn)擊該元素時(shí),該元素不是處于禁用狀態(tài),那么就設(shè)置該元素為禁用,給一個(gè)定時(shí)任務(wù),到期后使該元素變?yōu)榭捎?。這里邊具體的參數(shù),下面會(huì)跟大家詳細(xì)介紹。

  不過這只是一個(gè)局部指令,只能在當(dāng)前 .vue 文件中使用,我們也可以定義全局指令,這樣就可以在所有的 .vue 文件中使用了。

  2.1.2 全局指令

  全局指令我們一般寫在 main.js 中,或者寫一個(gè)單獨(dú)的 js 文件然后在 main.js 中引入,下面的例子是直接寫在 main.js 中:

  const app = createApp(App);

  app.directive('onceClick',{

  mounted(el, binding, vnode) {

  el.addEventListener('click', () => {

  if (!el.disabled) {

  el.disabled = true;

  setTimeout(() => {

  el.disabled = false;

  }, binding.value || 1000);

  }

  });

  }

  })

  這樣,我們就可以隨時(shí)隨地去使用 v-onceClick 這個(gè)指令了。

  可能小伙伴感覺比較疑惑,自定義指令時(shí)候的 mounted 以及這里的參數(shù)都是咋回事,那么接下來松哥就來和大家詳細(xì)介紹一下這些方法和參數(shù)。

  更多關(guān)于“Java培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的好程序員班,高品質(zhì)課程助力你實(shí)現(xiàn)java程序員夢(mèng)想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
服務(wù)器為什么要用Linux?

服務(wù)器為什么要用Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,有其獨(dú)特的優(yōu)勢(shì)和特點(diǎn)。包括其...詳情>>

2023-10-14 12:34:11
ORM解決的主要問題是什么?

ORM(對(duì)象關(guān)系映射)解決的主要問題是將關(guān)系數(shù)據(jù)庫與面向?qū)ο缶幊讨g的映射困境。在傳統(tǒng)的關(guān)系數(shù)據(jù)庫中,數(shù)據(jù)以表格的形式存儲(chǔ),而在面向?qū)ο?..詳情>>

2023-10-14 12:26:19
Go為什么不支持三元運(yùn)算符?

Go為什么不支持三元運(yùn)算符Go語言是一種以簡(jiǎn)潔和有效性為目標(biāo)的編程語言,因此在設(shè)計(jì)過程中,Go的設(shè)計(jì)者刻意排除了一些他們認(rèn)為可能導(dǎo)致復(fù)雜性或...詳情>>

2023-10-14 12:12:36
IT通常說的平臺(tái)是什么意思?

在信息技術(shù)(IT)領(lǐng)域,”平臺(tái)”這個(gè)詞有著廣泛的含義,它常常指代支持軟件應(yīng)用開發(fā)和運(yùn)行的基礎(chǔ)框架和環(huán)境。以下是對(duì)”平臺(tái)”這個(gè)概念的更深入...詳情>>

2023-10-14 11:55:36
什么是PowerPivot?

什么是PowerPivotPowerPivot,全稱”PowerPivot for Excel”,是Microsoft提供的一種數(shù)據(jù)分析工具,可以作為Excel的插件使用。通過PowerPivot,...詳情>>

2023-10-14 11:25:48