vue2自定义指令动态添加修饰符和value

几个月前写了一个 v-arrow 的自定义指令,用于给一个html元素添加一个小三角,如图所示。

v-arrow.top={left: '10px'}。表示 小三角 出现的位置在盒子上边并且距离左侧10px的位置。

vue2自定义指令动态添加修饰符和value

 

 

但是这几天封装新组件的时候要用到这个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'}"

vue2自定义指令动态添加修饰符和value

 

 

 动态 传入的 top 修饰符在arg 中,动态传入的{left: '10px'}在value中。

value是Object格式,可以传入多个,modifiers 也是可以传入多个

vue2自定义指令动态添加修饰符和value

 

 

 如果用arg的方式传入多个修饰符的话,可以将  v-arrow:[arrowPlacement] 的 arrowPlacement = ['top',  'left']。

vue2自定义指令动态添加修饰符和value

 

 

最后, arg 和 modifiers 可以共存。

vue2自定义指令动态添加修饰符和value

 

上一篇:c++:find和substr函数的用法


下一篇:10-03每日一题:Leetcode 166. 分数到小数