如何在Vue+Storybook中动态使用PrimeVue Tooltip指令的方向修饰符

你可以直接使用PrimeVue Tooltip的对象绑定语法实现动态方向控制，无需依赖静态修饰符，修改代码如下：

核心修改点 #

• 将指令的绑定值从纯文本改为配置对象，content属性对应提示文本，position属性对应动态传入的方向参数
• 给默认参数配置默认方向值

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='{content: args.tooltipMsg, position: args.tooltipDirection}' />",
})
export const Primary = Template.bind({})
Primary.args = {
  label: "Primary",
  tooltipMsg: "Enter ur name",
  // 新增默认方向配置
  tooltipDirection: "left"
}

修改完成后即可在Storybook控制面板中切换tooltipDirection的下拉选项，实时修改提示框的弹出方向。

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