Vue 插槽

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

特性

• 支持 Vue 3
• 为包含插槽的 stories 生成代码片段
• 通过 Storybook 的 controls 控制插槽的特定方面
• 用组件包裹插槽内容

📦 安装

pnpm add -D storybook-addon-vue-slots

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

// .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 controls 中的数据传递给插槽，或访问其他参数。

// 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 arg control 的值被传递到插槽模板中，从而允许控制插槽的某个方面。

高级用法

添加组件

// 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