已弃用

此附加组件已弃用，原因是 官方 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	布尔值	true	是否显示标题。
source	布尔值	true	是否显示源代码（用法）。
wrapperComponent	组件	默认包装器	覆盖内联文档组件。
previewClassName	字符串	undefined	传递到预览容器的类名。
previewStyle	样式对象	undefined	传递到预览容器的样式。
summary	字符串	''	故事的摘要。接受 Markdown。
components	{ [name: string]: Component }|null	null	为这些组件显示信息。与组件的 components 属性类型相同。
docsInPanel	布尔值	true	是否在附加组件面板中显示文档。
useDocgen	布尔值	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、事件或插槽显式指定描述，请为您的故事组件添加 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 目录。