storybook-addon-custom-event-broadcaster

自訂面板標籤，用於將自訂事件傳送至元件。

此擴充功能會在擴充功能面板中新增一個標籤。它具有一組輸入欄位。這些欄位的輸入用於建立一個自訂事件。

輸入	功能
事件名稱	事件的名稱
資料	自訂資料，在事件中傳送
選擇器	將觸發事件的節點的選擇器
「傳送」按鈕	按下以傳送事件

安裝

npm install storybook-addon-custom-event-broadcaster

將擴充功能新增至 Storybook 設定

// .storybook/main.js
module.exports = {
 ...
  addons: [
   ...
    'storybook-addon-custom-event-broadcaster',
  ],
};

在您的 Story 中的設定

若要設定您的 Story，您需要在 parameters 區段新增一個 customEventPanel 物件。它有一個必填參數 eventName 和兩個選用參數 eventData、selector。它與三個輸入欄位類似。

如果 selector 欄位為空，則事件將在頁面的 document 物件上觸發。如果已填寫，則會在選取的節點上觸發事件。

// \*.stories.jsx
// example configuration of 3 lines
export default {
  title: "Content/MyStory",
  parameters: {
    customEventPanel: [
      {
        eventName: "event:example",
      },
      {
        eventName: "my:event",
        eventData: {
          opt: 23,
        },
        selector: ".selector",
      },
      {
        eventName: "my:otherevent",
        eventData: {
          foo: 23,
        },
      },
    ],
  },
  argTypes: {},
};

外掛程式的運作方式

我有一個使用此擴充功能的範例專案，位於 https://github.com/derKuba/stenciljs-tutorial/tree/main/component-lib。

開發指令碼

• npm start 以監看模式執行 babel 並啟動 Storybook
• npm run build 建置並封裝您的擴充功能程式碼

從 TypeScript 切換至 JavaScript

不想使用 TypeScript？我們提供方便的 eject 指令：npm run eject-ts

這會將所有程式碼轉換為 JS。這是一個破壞性程序，因此我們建議您在開始編寫任何程式碼之前執行此操作。