storybook-auto-events

厌倦了每次都要将所有事件添加到你的故事中，以便它们出现在 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()),
];

使用

在你的故事中添加一个名为 events 的新参数。Events 是一个对象，它包含一个事件处理程序列表，事件名称作为键。通过 data 或 computed 属性将这些事件添加到故事上下文中，最后通过 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"/>`,
});