Vue 插槽

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

功能

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

📦 安装

pnpm add -D storybook-addon-vue-slots

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

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