vue2自定義指令動態添加修飾符和value

幾個月前寫了一個 v-arrow 的自定義指令，用於給一個html元素添加一個小三角，如圖所示。

v-arrow.top={left: '10px'}。表示 小三角 出現的位置在盒子上邊並且距離左側10px的位置。

 

 

但是這幾天封裝新組件的時候要用到這個v-arrow, 修飾符.top(除此之外還有.bottom / .left / .right),並且還有以key-value的形式傳入的value。其實可以修改v-arrow這個指令，讓修飾符modifiers 的參數都在value中傳入和獲取，但是修改這個指令的代碼就意味着我還要修改用到這個v-arrow指令的其他地方。

所以，動態傳入修飾符modifiers 和 動態傳入value 就顯得很是重要。

v-arrow:[arrowPlacement]="arrowOffset" 

// arrowPlacement 傳入的值要在binding.arg中取，如果是靜態v-arrow.top的話，'top'在binding.modifiers中

arrowPlacement、arrowOffset 都是變量。
若 arrowPlacement = 'top', arrowOffset = {left: '20px'};
那么 等價於 v-arrow.top="{left: '20px'}"

 

 

 動態 傳入的 top 修飾符在arg 中，動態傳入的{left: '10px'}在value中。

value是Object格式，可以傳入多個，modifiers 也是可以傳入多個

 

 

 如果用arg的方式傳入多個修飾符的話，可以將  v-arrow:[arrowPlacement] 的 arrowPlacement = ['top',  'left']。

 

 

最后， arg 和 modifiers 可以共存。