Storybook 在 Show Code 中显示所有内容答案

【问题标题】：Storybook is displaying everything in Show CodeStorybook 在 Show Code 中显示所有内容
【发布时间】：2021-06-06 07:12:17
【问题描述】：

我正在使用 Vue 3 + Storybook。一切正常，除了当我单击“显示代码”时，它只显示所有内容而不仅仅是模板..我做错了什么？

这是我的故事：

import Button from './Button.vue';

export default {
  title: 'Components/Button',
  component: Button
};

const Template = (args) => ({
  // Components used in your story `template` are defined in the `components` object
  components: { Button },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: '<my-button v-bind="args" />',
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

【问题讨论】：

标签： vue.js storybook

【解决方案1】：

正如您从下面的屏幕截图中看到的那样，它确实可以正常工作，正如您在 Vue 2 中所期望的那样。

但是，我使用 Vue 3 得到的结果与您相同。

简单的答案

它还没有为 Vue 3 实现。

您可以在 Storybook 的 docs 插件的 source code 中看到， Vue 3 框架有一个单独的实现。但是，Vue 3 实现缺少源代码装饰器，它会生成源代码的渲染版本。

修补程序

如果您不想等到 Storybook 团队发布更新，您可以使用以下代码根据您的论点生成您自己的文档。请记住，这并不涵盖所有用例。

const stringifyArguments = (key, value) => {
    switch (typeof value) {
    case 'string':
        return `${key}="${value}"`;
    case 'boolean':
        return value ? key : '';
    default:
        return `:${key}="${value}"`;
    }
};

const generateSource = (templateSource, args) => {
    const stringifiedArguments = Object.keys(args)
    .map((key) => stringifyArguments(key, args[key]))
    .join(' ');

    return templateSource.replace('v-bind="args"', stringifiedArguments);
};

const template = '<my-button v-bind="args" />';

const Template = (args) => ({
    components: { MyButton },
    setup() {
    return { args };
    },
    template,
});

export const Primary = Template.bind({});
Primary.args = {
    primary: true,
    label: 'Button',
};

Primary.parameters = {
    docs: {
    source: { code: generateSource(template, Primary.args) },
    },
};

另一个临时解决方案是手动编写源代码，而不是自动生成。

Primary.parameters = {
  docs: {
    source: { code: '<my-button primary label="Button" />' },
  },
};

【讨论】：