storybook-addon-custom-event-broadcaster

自定义面板标签，用于向组件发送自定义事件。

此插件在插件面板中添加一个标签页。它包含一组输入字段。这些字段的输入用于创建自定义事件。

输入	功能
EventName	事件的名称
Data	自定义数据，将在事件中发送
Selector	事件将触发在其上的节点的选择器
“发送”按钮	点击发送事件

安装

npm install storybook-addon-custom-event-broadcaster

将插件添加到 Storybook 配置中

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

在您的故事中配置

要配置您的故事，您需要在 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 在 watch 模式下运行 babel 并启动 Storybook
• npm run build 构建并打包您的插件代码

从 TypeScript 切换到 JavaScript

不想使用 TypeScript？我们提供了一个便捷的 eject 命令：npm run eject-ts

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