时间戳

首页 > 解决方案 > 是否可以在故​​事书装饰器中访问故事的数据？

vue.js - 是否可以在故​​事书装饰器中访问故事的数据？

问题描述

在 Vue.js 中，我有一系列自定义输入组件，它们具有v-model. 在 Storybook 中，我想在decorator我的故事中添加一个以显示我的自定义输入的当前值，如何在装饰器上访问组件的数据？

这是TextField.stories.js故事：

import TextField from 'TextField';
import decorator from 'decorator';

export default {
    title: 'Example/TextField',
    component: TextField,
    decorators: [decorator],
    argTypes: {
        update: { action: 'update' },
        // value: { control: { type: 'text' } },
    },
};

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { TextField },
    template: '<text-field v-model="value" @update="update" v-bind="$props" />',
    data() {
        return {
            value: 'foo bar',
        };
    },
});

export const Simple = Template.bind({});
Simple.args = {
    label: 'Simple Text Field',
};

这是decorator.js，我想value从这里的故事中访问：

export default () => ({
    template: '<div class="m-5"><story /><pre class="bg-secondary mt-5 p-4">{{ value }}</pre></div>',
});

标签： vue.jsstorybook

解决方案

您可以从全局装饰器访问单个故事的参数：

// preview.js:
export const decorators = [(storyFn, context) => {
  const { label, ...otherArgs } = context.args;

  // use in decorator output
}]

然后以 CSF 格式：

export const MyStory = ({ label, ...otherArgs }) => { ... }
MyStory.args = {
   label: 'whatever',
   // etc.
}

推荐阅读