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