storybook-auto-events

是否厭倦總是將所有事件添加到您的 Story 中，以便它們顯示在「Actions」面板中？這就是 storybook-auto-events 派上用場的地方。它會自動偵測您元件中觸發的所有事件，並為該事件建立事件監聽器。

安裝

npm i storybook-auto-events

設定

在您的 .storybook/preview.js 中加入新的 decorator

// File: .storybook/preview.js

import withEvents from 'storybook-auto-events';

export const decorators = [
    withEvents,
    storybookAxiosDecorator(getAxios()),
];

使用方式

在您的 Story 中新增名為 events 的參數。Events 是一個物件，其中包含以對應事件名稱作為鍵的處理函式清單。透過 data 或 computed 屬性將這些事件新增至 Story 的內容中，最後透過 v-on="events" 將所有事件繫結到您的元件。

//select-input.stories.js

export const IncludeExclude = (args, { argTypes, events }) => ({
    components: { SelectInput },
    props: Object.keys(argTypes),
    data: () => ({
        events,
    }),
    template: `
        <select-input v-bind="$props" v-on="events"/>`,
});