npm包@z4o4z/storybook-addon-events的使用教程

前言

在前端开发中，故障排错是一个很重要的环节，而要排除故障，我们首先需要定位问题。而在定位问题的过程中，事件的触发与响应通常是一个很重要的环节。因此，有一个可以记录组件事件自动化记录功能的工具是很必要的。 Storybook 是一个非常流行的前端 UI 开发工具，它的核心思想是在开发和测试 UI 组件的时候，使用 Storybook 作为一个单独的开发环境。npm包@z4o4z/storybook-addon-events 就是提供了一种自动化记录 Storybook 中组件的事件记录的功能，可以大大提高我们的开发效率。

安装

npm i @z4o4z/storybook-addon-events --save-dev

实现步骤

1. 在 .storybook/main.js 文件中，导入插件包，创建添加插件的配置对象：

-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------ - - ----------------------------
----- - --------- - - ---------------------------------
----- - --------- - - ----------------------------------
----- - --------- - - ----------------------------------
----- ------ - -------------------------------------------------------
----- ------- - --------------------------------------

-------------- - -
  -------- ----------------------------------
  ------- -
    -
      ----- ------------------------
      -------- -
        ------------- -----
      --
    --
    ----------- ------- ---
    ----------
    ----------
    -------
  --
--

1. 在组件的故事中，使用 addEvents 方法注册要记录的事件：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------
------ - --------- - ---- --------------------------------

------ ------- -
  ------ ------- ---- --------
  ----------- ---------------------- ----------------
--

------ ----- ------- - -- -- --------------- ----------------

1. 在 Storybook 中运行故事，可以通过点击“事件记录”按钮，查看已经记录下的事件名和传递的参数。

支持的事件类型

• onClick
• onCopy
• onCut
• onPaste
• onCompositionEnd
• onCompositionStart
• onCompositionUpdate
• onKeyDown
• onKeyPress
• onKeyUp
• onFocus
• onBlur
• onChange
• onInput
• onSubmit
• onInvalid
• onReset
• onSelect
• onBeforeInput
• onContextMenu
• onDoubleClick
• onDrag
• onDragEnd
• onDragEnter
• onDragExit
• onDragLeave
• onDragOver
• onDragStart
• onDrop
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut
• onSelectStart
• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart
• onScroll
• onWheel
• onAbort
• onCanPlay
• onCanPlayThrough
• onDurationChange
• onEmptied
• onEncrypted
• onEnded
• onError
• onLoadedData
• onLoadedMetadata
• onLoadStart
• onPause
• onPlay
• onPlaying
• onProgress
• onRateChange
• onSeeked
• onSeeking
• onStalled
• onSuspend
• onTimeUpdate
• onVolumeChange
• onWaiting

贴士

• 建议只记录关键的事件，避免事件记录过多，对于性能有所影响。
• 有时候，一个事件可能有多个参数，如 onKeyDown、onKeyPress之类的事件。希望将多个参数作为一个对象传递，这样可以更好地区分参数 。如下所示：

export const Default = () => <Button onKeyDown={(e) => console.log('onKeyDown', e)} />;
addEvents('Button', {
  onKeyDown: [{ keyCode: 13, key: 'Enter' }],
});

结语

npm包@z4o4z/storybook-addon-events是一个非常有用的工具，它可以帮助我们快速定位前端组件的故障。通过本文的介绍，相信大家已经掌握了npm包@z4o4z/storybook-addon-events的基本使用方法，快去试试吧！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588681e8991b448d5c92