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