已棄用

由於 官方 addon-info 已停用，此擴充套件已被棄用。

Storybook 現在有一個替代擴充套件，稱為 Docs 擴充套件 (addon-docs)，它具有原生的 Vue.js 支援，並由 vue-docgen-api 提供自動的 props/events/slots 文件。

此儲存庫將不會再新增功能或修復錯誤。請改用 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 loader，以便使用 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	元件	預設包裝器	覆寫內嵌文件元件。
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、events 或 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 目錄。