storybook-auto-events

是否厌倦了总是将所有事件添加到你的故事中以便它们显示在 Actions 面板里？storybook-auto-events 正能派上用场。它会自动检测你的组件中抛出的所有事件，并为该事件精确地创建一个事件监听器。

安装

npm i storybook-auto-events

设置

在你的 .storybook/preview.js 中添加一个新的 装饰器

// 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"/>`,
});