Vue。如何在 vuejs 自定义指令中传递动态修饰符

【问题标题】：Vue. How to pass dynamic modificator in vuejs custom directiveVue。如何在 vuejs 自定义指令中传递动态修饰符
【发布时间】：2022-09-30 18:05:52
【问题描述】：

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

如何动态更改“底部”？我有几个修饰符：上、左、下、右。在不同的情况下，有必要创建一个只有一个其他特定修改器的组件。根据修改器雕刻渲染条件似乎不是最佳解决方案。

【解决方案1】：

Vue 不支持动态修饰符。但是，如果您阅读v-tooltip 的 API 参考，您会意识到该指令还接受所有组件道具，包括放置，因此您可以在技术上这样做：

<Button 
  v-tooltip="{ value: tooltip, disabled: !tooltip, placement: tooltipPlacement }"
/>

...其中tooltipPlacement（或您选择的变量）可以是任何可接受的放置值：https://floating-vue.starpad.dev/api/#placement

【讨论】：