已弃用

由于官方 addon-info 已停用，此插件已被弃用。

Storybook 现在有一个替代插件，名为 Docs 插件（addon-docs），它原生支持 Vue.js，并由 vue-docgen-api 自动生成 props/events/slots 文档。

此仓库将不再增加新功能或修复 bug。请改用 Docs 插件。

迁移到 Docs

如上所述，Docs 插件通过 vue-docgen-loader 使用 vue-docgen-api。它们也是 storybook-addon-vue-info 内部使用的工具。因此，迁移步骤相当简单。

docgen 工具不再是 peerDependencies

由于 Docs 插件将 vue-docgen-api 和 vue-docgen-loader 指定为直接依赖项，您不必在 package.json 中列出它们。

 "dependencies": {
-  "vue-docgen-api": "x.x.x",
-  "vue-docgen-loader": "x.x.x"
 }

当然，您可以保留它们以控制要使用的具体版本。

明确指定要生成文档的组件

您需要在故事元数据中设置 component 字段。

// foo.stories.js
import MyComponent from './my-component.vue'

export default {
  title: 'Components/MyComponent',
  component: MyComponent
}

export const story = () => ({
  components: { MyComponent },
  template: '<my-component/>'
})

将 summary 移动到 JSDoc 注释或 MDX 中

Docs 插件中与 summary 选项等效的是组件注释或 MDX。Docs 插件读取组件注释并将其显示为组件的描述。

// legacy.stories.js
export const myStory = () => ({
  /* ... */
})

myStory.story = {
  info: {
    summary: 'foo bar'
  }
}

<!-- component -->
<script>
  /**
   * foo bar
   */
  export default {
    /* ... */
  }
</script>

或者，您可以为更复杂的用法使用 MDX。

---

storybook-addon-vue-info

一个显示 Vue 组件信息的 Storybook 插件。

• 演示

要求

• @storybook/vue>=4.0.0

开始使用

首先，安装插件。

npm install --save-dev storybook-addon-vue-info

# yarn add -D storybook-addon-vue-info

然后在 addons.js 中注册。

// .storybook/addons.js

// Don't forget "/lib/" !!
import 'storybook-addon-vue-info/lib/register'

并设置一个 webpack 加载器，以便使用 vue-docgen-api 提取组件信息。

npm install --save-dev vue-docgen-loader vue-docgen-api

# yarn add -D vue-docgen-loader vue-docgen-api

// .storybook/webpack.config.js

// This example uses "Full control mode + default".
// If you are using other mode, add payload of `config.module.rules.push` to rules list.
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.vue$/,
    loader: 'vue-docgen-loader',
    enforce: 'post'
  })

  return config
}

用法

添加 withInfo 装饰器，然后为故事设置 info 选项。

注意：插件需要 info 选项。如果您忽略它，插件将不起作用。

import { storiesOf } from '@storybook/vue'

import { withInfo } from 'storybook-addon-vue-info'

storiesOf('MyComponent', module)
  .addDecorator(withInfo)
  .add(
    'foo',
    () => ({
      components: { MyAwesomeComponent },
      template: '<my-awesome-component/>'
    }),
    {
      info: {
        summary: 'Summary for MyComponent'
      }
    }
  )

您可以将插件设置为全局装饰器。

// config.js
import { addDecorator } from '@storybook/vue'

import { withInfo } from 'storybook-addon-vue-info'

addDecorator(withInfo)

要设置默认选项，请使用 setDefaults。

// .storybook/config.js
import { setDefaults } from 'storybook-addon-vue-info'

setDefaults({
  header: false
})

有关更多详细信息，请参阅实时示例。

选项

名称	数据类型	默认值	描述
header	boolean	true	是否显示头部。
source	boolean	true	是否显示源代码（用法）。
wrapperComponent	Component	默认包装器	覆盖内联文档组件。
previewClassName	string	undefined	传递给预览容器的类名。
previewStyle	样式对象	undefined	传递给预览容器的样式。
summary	string	''	故事的摘要。接受 Markdown 格式。
components	{ [name: string]: Component }|null	null	显示这些组件的信息。类型与组件的 components 属性相同。
docsInPanel	boolean	true	是否在插件面板中显示文档。
useDocgen	boolean	true	是否使用 vue-docgen-api 的结果。
casing	"kebab" | "camel" | "pascal" | undefined	undefined	使用哪种命名风格。详细用法见下文。

有效的 casing 选项

{
  // Don't convert names
  casing: undefined
}

{
  // Show names in kebab-case
  casing 'kebab'
}

{
  // Show prop names in camelCase and
  // Show component names in PascalCase
  casing: 'camel' // or 'pascal'
}

{
  // Show prop names in camelCase and
  // Show component names in kebab-case
  casing: {
    props: 'camel',
    component: 'kebab'
  }
}

除了插件选项外，我们还有一个组件选项。

手动设置描述

使用 vue-docgen-api，插件会自动显示由 docgen 提取的描述和类型（参见 vue-docgen-api README 中的示例）。但是，如果您想明确指定组件 props、事件或 slots 的描述，请为您的故事组件添加 description 选项。

假设 <my-awesome-component> 有 props label 和 visible。

storiesOf('MyComponent', module)
  .addDecorator(withInfo)
  .add(
    'foo',
    () => ({
      components: { MyAwesomeComponent },
      template: '<my-awesome-component/>',
      description: {
        MyAwesomeComponent: {
          props: {
            // These description will appear in `description` column in props table
            label: 'A label for my awesome component',
            visible: 'Whether component is visible or not'
          },
          events: {
            click: 'Event for user clicking the component'
          },
          slots: {
            default: 'Place text or icon here'
          }
        }
      }
    }),
    {
      info: true
    }
  )

有关更多详细信息，请查看实时示例。

示例

有关实际示例，请参阅 example 目录。