故事书代码预览不显示 VueJS 中插槽的使用

Question

我正在使用 Storybook 创建有关我在项目中使用的组件的文档。其中一个组件使用了 VueJS 中称为“槽”的功能。在下面的代码片段中，您可以看到使用插槽的故事。

export const IconText = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button, IconAdd },
  template: `
  <Button>
    <template v-slot:text>
      Text
    </template>

    <template v-slot:icon>
      <IconAdd />
    </template>
  </Button>
  `
})

问题是，如果我在 Storybook 中触摸查看这个 Story 的代码预览，我只看到下面的代码片段，我想看看插槽的用法，你知道我该如何实现吗？

<template><Button /></template>

Answer 1

我遇到了同样的问题，这就是我为使其发挥作用所做的事情。

我知道这不是最漂亮的方法，但这是我发现的唯一方法。

因此，您必须在故事的参数中告诉手动显示哪些代码，如下所示：

yourStory.parameters = {
  docs: {
    source: {
      code: 'Write code you want to be displayed here',
    },
  },
};

有关更多信息，请检查：https://storybook.js.org/docs/react/writing-docs/doc-blocks#docspage-1