免责声明：由于信息是自动生成的，可能存在不准确的情况。
要解决在 prop JSDoc 中未填充控件的问题，请按照以下步骤操作：

1. 更新组件中的 JSDoc:确保您的 JSDoc 正确包含 @values。

<!-- src/stories/Button.vue -->
<script setup>
/**
* Button size
* @values 'small', 'medium', 'large'
*/
defineProps({
size: {
type: String,
default: 'medium'
}
});
</script>

1. 配置 Storybook:确保您的故事文件中的 argTypes 反映了枚举值。

// src/stories/Button.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
  },
  args: {
    size: 'medium',
  },
};

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

export const Primary: Story = {
  args: {
    size: 'medium',
  },
};

1. 检查 vue-docgen-api 配置:确保您在 Storybook 设置中正确配置了 vue-docgen-api 以解析 JSDoc 注解。

// .storybook/main.ts
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-docs'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      loader: 'vue-docgen-loader',
      options: {
        docgenOptions: {
          alias: { '@': path.resolve(__dirname, '../src') },
        },
      },
    });
    return config;
  },
};

参考资料

/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeProps.stories.ts
/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta
/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/options-api
/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts

关于 Greptile

此响应为您提供研究的起点，而非精确解决方案。
帮助我们改进！如果这有帮助，请留下一个 👍，如果无关紧要，请留下一个 👎。

@larsrickert @chakAs3 @kasperpeulen 你能帮忙解决这个问题吗？

@thedamon,我们从未能让vue-docgen-api处理高级功能，所以我们认为它是遗留的。你提供的引用正在使用vue-component-meta,这是官方Vue语言工具(Volar)的一部分。

@chakAs3 Ah k.这可能在很大程度上解释了它。我的参考是我知道vue-docgen- api本身应该通过jsdoc中的@values字段拉取可能的值，而我对它在Vue 2和storybook 6的某种组合中工作的记忆有些模糊。
然而，对于vue-component-meta,如果我们不使用TS,我不确定如何制作自动控件...我们在仓库中使用autodocs时得到的结果非常有限(也许是因为工作区)。我制作的复现示例昨天对我来说无法填充控件，但今天在我重新运行yarn storybook后对我来说是可以的；如果不使用TS,是否有办法在使用jsdoc时访问autodocs控件？

@thedamon 我认为在Vue中(不依赖于Storybook),如果没有TypeScript,自动控制是不可能的，因为纯JavaScript仅限于Number, String, Boolean, Object, Array类型，无法进行更详细的类型定义。
即使为枚举值添加JSDoc标签，当你将鼠标悬停在props上时，Vue VSCode扩展(与vue-component-meta使用的Volar类似)仍然会显示String类型。
我建议要么使用TypeScript,或者你可以像这样手动定义参数，这应该是等效的努力，因为你可以删除@values JSDoc标签，因为它不会有任何效果：

const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
  },
};