storybook-addon-custom-event-broadcaster

自定义面板选项卡，用于向组件发送自定义事件。

此插件在插件面板中添加了一个选项卡。它有一组输入字段。这些字段的输入用于创建自定义事件。

输入	功能
事件名称	事件的名称
数据	自定义数据，将在事件中发送
选择器	将触发事件的节点的选择器
"发送"按钮	按下以发送事件

安装

npm install storybook-addon-custom-event-broadcaster

将插件添加到 Storybook 配置中

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

故事中的配置

要配置你的故事，你需要在参数部分添加一个 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？我们提供了一个方便的弹出命令：npm run eject-ts

这将把所有代码转换为 JS。这是一个破坏性过程，因此我们建议在你开始编写任何代码之前运行它。