Storybook+Vue3中defineExpose暴露的方法无法自动显示在argTable

默认情况下，Storybook Vue3的自动文档（Autodocs）不会自动识别defineExpose暴露的组件实例方法——它默认只解析props、events、slots这类核心组件选项。但你不需要手动在argTable里编写这些方法，可以通过配置实现自动生成。

解决方案1：配置vue-docgen-api提取暴露的方法 #

Storybook Vue3底层依赖vue-docgen-api解析组件元信息，你可以通过配置开启对defineExpose方法的提取：

在.storybook/main.ts中添加vueDocgenOptions配置：

import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|vue)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  // 开启defineExpose方法解析
  vueDocgenOptions: {
    exposeMethods: true,
  },
};

export default config;

配置后重启Storybook，Autodocs文档中会自动新增Methods板块，显示你通过defineExpose暴露的reset方法及对应类型信息。

解决方案2：基于TypeScript类型自动扩展文档（备选） #

如果上述配置无法生效，你可以利用组件的TypeScript类型自动生成方法文档，避免手动编写：

1. 编写工具函数提取暴露的方法类型：

// .storybook/utils.ts
type ExtractMethods<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

export function getExposedMethods<T>(component: T): ExtractMethods<InstanceType<typeof component>> {
  return {} as ExtractMethods<InstanceType<typeof component>>;
}

2. 在组件的Story meta中扩展docs参数：

import type { Meta, StoryObj } from '@storybook/vue3';
import { CustomInput } from '../components/input';
import { getExposedMethods } from '../.storybook/utils';

const exposedMethods = getExposedMethods(CustomInput);

const meta = {
  title: 'Components/CustomInput',
  component: CustomInput,
  tags: ['autodocs'],
  parameters: {
    docs: {
      components: {
        methods: Object.keys(exposedMethods).map(key => ({
          name: key,
          type: { summary: typeof exposedMethods[key] },
          description: '重置组件状态', // 可根据需求自定义描述
        })),
      },
    },
  },
} satisfies Meta<typeof CustomInput>;

export default meta;
type Story = StoryObj<typeof meta>;

这个方法通过TypeScript类型推断自动提取方法名和类型，无需手动逐个编写条目。

内容的提问来源于stack exchange，提问作者leteu