Vue中如何为自定义指令动态传递修饰符（PrimeVue Tooltip场景）

不用写一堆渲染条件，直接利用Tooltip指令的配置项就能搞定：

PrimeVue v2的Tooltip指令除了用修饰符（.top/.left这类）指定位置，还支持在绑定的对象里通过position属性设置位置。你只需要把位置值存成一个响应式变量，动态修改这个变量就能切换Tooltip的方向，完全不用重复写组件。

示例代码：

<Button 
  ...
  v-tooltip="{ value: tooltip, disabled: !tooltip, position: tooltipPosition }"
/>

在组件的data里定义这个变量：

data() {
  return {
    tooltip: '提示文本',
    tooltipPosition: 'bottom' // 初始位置
  }
}

之后要切换位置的时候，直接修改tooltipPosition的值就行，比如：

// 切换到顶部
this.tooltipPosition = 'top'
// 切换到左侧
this.tooltipPosition = 'left'

这样不管什么场景，只需要更新变量值，Tooltip的位置就会自动跟着变，比用v-if/v-else渲染多个Button简洁多了。

内容的提问来源于stack exchange，提问作者EikoM