今天遇到按鈕權(quán)限控制這個需求，像往常一樣，百度一哈：第一種：寫個全局方法，然后每個地方用（略顯low），作為一個優(yōu)秀的社會主義接班人是不允許自己寫出這么菜雞的代碼的 ，于是我選擇第二種方法： 用Vue的directive來完成這個任務(wù)：

首先，我們先看看官網(wǎng)上對于指令的例子：

官網(wǎng)例子

我用ts實現(xiàn)這個指令：

ts實現(xiàn)

接下來進入我們解決我們的需求：

我們先用store去存儲后臺返回的按鈕權(quán)限列表： 用字典（key: value）的這樣數(shù)據(jù)結(jié)構(gòu)來存；在指令中的vnode中，我們可以獲取到當前路由各種屬性，我使用的是路由的title做為標識；這樣拿到對應(yīng)位置的按鈕權(quán)限列表

數(shù)據(jù)例子

然后進行我們指令的編寫：假設(shè)有十個頁面 每個頁面上有十條數(shù)據(jù)，每條數(shù)據(jù)有兩個按鈕，就需要有200次操作，所以指令這邊不能放太多的復(fù)雜邏輯；同樣，每次從store里面獲取數(shù)據(jù)也是一個耗費時間和性能的操作；所以就產(chǎn)生了如下代碼(在main.ts 添加指令)：

main.ts

同時在按鈕上添加key值和v-has指令，就可以做到按鈕級別權(quán)限控制 ：?

按鈕權(quán)限控制

其中有一個地方遇到了坑：就是在最開始時，我使用的是bind方式，于是在最后移除節(jié)點的時候，el.parentNode為null，就會報錯，查閱文檔才找到原因：原來是對應(yīng)的鉤子函數(shù)使用的不對，無法獲取到el.parentNode；改用inserted后，正常使用；

vue-directive 鉤子函數(shù)

有這么多鉤子函數(shù)，也能讓指令適用于更多的場景之中，這也是我第一次寫指令，感覺很棒，產(chǎn)生了很多新的想法；