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

Question

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

如何动态改变“底部”？我有几个修饰符：顶部、左侧、底部、右侧。在另一种情况下，有必要创建一个仅具有另一个特定修饰符的组件。根据修改器来雕刻渲染条件似乎不是最佳解决方案。

我用PrimeVue

Answer 1

Vue 不支持动态修饰符。但是，如果您通读 的 API 参考v-tooltip，您会发现该指令还接受所有组件属性：

\n

\n

该指令还支持所有组件 props
\n\xe2\x80\x94源

\n

\n

...其中包括放置，因此您可以在技术上执行此操作：

\n

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

\n

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

\n