久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(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í)很簡單,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程序員夢想。

        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)勢和特點(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語言是一種以簡潔和有效性為目標(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
        忻州市| 玉山县| 太仓市| 崇左市| 台湾省| 克拉玛依市| 建宁县| 聊城市| 沛县| 新田县| 星座| 彭泽县| 长白| 买车| 东乌| 南漳县| 连江县| 莱阳市| 当涂县| 天津市| 荥阳市| 平顶山市| 壶关县| 许昌县| 扶沟县| 平和县| 天峨县| 理塘县| 关岭| 海兴县| 顺平县| 莎车县| 陆良县| 泽库县| 乌拉特前旗| 遂昌县| 新竹县| 大悟县| 朝阳市| 胶州市| 邳州市|