Vue 插槽

允许在 Storybook 的 CSF 文件中使用 Vue 插槽。

特点

• Vue 3 支持
• 为带有插槽的故事生成代码片段
• 通过 Storybook 的控件控制插槽的特定方面
• 用组件包装插槽内容

📦 安装

pnpm add -D storybook-addon-vue-slots

将 storybook-addon-vue-slots 添加到 main.ts 文件中的插件中

// .storybook/main.ts
export default {
  // ...
  addons: [
    // ...
    "storybook-addon-vue-slots",
  ],
} satisfies StorybookConfig;

例子

运行

npm run storybook

运行示例 Storybook

用法

零

默认情况下，附加组件会将 [slotName] 参数传递给模板，例如 {{ args.default }}。

基础

通过将字符串传递到插槽定义来添加对插槽的描述

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: `Default slot content`,
    },
  },
};

标准

在模板中使用 args.[slotName] 将 Storybook 控件中的数据传递到插槽，或访问其他参数。

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: {
        description: "Default slot",
        template: `<p>{{ args.default }}</p>`,
      },
      header: {
        description: "Header slot",
        template: `<p>{{ args.header }}</p>`,
      },
    },
  },
};

因此，Storybook 表格中 header 参数控件的值被传递到插槽模板中，允许控制插槽的一个方面。

高级

添加组件

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: {
        description: "Default slot",
        template: `<p>{{ args.default }}</p>`,
      },
      header: {
        description: "Header slot",
        components: { AppButton },
        template: `<AppButton>{{ args.header }}</AppButton>`,
      },
    },
  },
};

待办事项

• 插槽回退支持

贡献

💖 资助

通过 PayPal 和 GitHub Sponsors 支持我的开源工作。

许可证

MIT 许可证 © 2023 Jacob Janisz