vue.js - primevue の修飾子を動的に使用する方法

Question

私は Primevue のツールチップ ( https://primefaces.org/primevue/showcase/#/tooltip ) をストーリーブック ファイルで使用しています。( https://storybook.js.org/docs/vue/get-started/introduction )。

このような「v-tooltip」属性または修飾子を方向「.left」で使用したいのですが、これは静的に正常に機能しています。

template: <Button type='button'  v-bind='args'  v-tooltip.left='args.tooltipMsg'  />

しかし、「v-tooltip.right」、「v-tooltip.bottom」などの方向を動的に渡したい.

ここに私の完全なコードがあります:

import Button from "primevue/button"
import Tooltip from "primevue/tooltip"


export default {
  title: "Components/Tooltip",
  component: { Button },
  argTypes: {
    label: {
      control: "text",
    },
    
    tooltipMsg: {
      control: "text",
    },
    tooltipDirection: {
      options: ["top", "bottom", "right", "left"],
      control: { type: "select" },
    },
  },
}

const Template = (args) => ({
  components: { Button },
  setup() {
    
    return { args }
  },
  directives: {
    tooltip: Tooltip,
  },

  template:
    "<Button type='button' v-bind='args' v-tooltip='args.tooltipMsg'  />",
})
export const Primary = Template.bind({})
Primary.args = {
  label: "Primary",
  tooltipMsg: "Enter ur name",
}