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