storybook (Vue)无法从验证器或JSDoc获取数组属性值

laik7k3q 于 3个月前发布在其他

关注(0)|答案(3)|浏览(46)

描述bug

Storybook无法为数组属性提取值(Vue)。

重现问题

/**
* My prop description
*/
    category: {
      type: String,
      default: 'primary',
      validator: (v) => ['primary', 'secondary', 'white'].includes(v),
    },

(顺便说一下，我也尝试了@values small, normal, large JSDoc注解，但没有成功)。
我一直无法使其正常工作，storybook始终渲染一个没有关于可用类型的信息的文本输入控件。我检查了一下，看起来vue-docgen-api确实可以从上面的定义中正确提取值。

预期行为

我期望控制插件显示一个带有多个选项的Select,每个选项对应prop的一个值。

截图

这是我得到的结果：

相反，我期望的是类似于文档所示的内容：

代码片段

如果适用，请添加代码示例以帮助解释您的问题。

系统

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
    npm: 6.14.11 - ~/Code/(path-to-my-package)/node_modules/.bin/npm
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-a11y: ^6.1.14 => 6.1.14 
    @storybook/addon-actions: ^6.1.14 => 6.1.14 
    @storybook/addon-essentials: ^6.1.14 => 6.1.14 
    @storybook/addon-knobs: ^6.1.14 => 6.1.14 
    @storybook/addon-links: ^6.1.14 => 6.1.14 
    @storybook/addon-viewport: ^6.1.14 => 6.1.14 
    @storybook/vue: ^6.1.14 => 6.1.14

谢谢，各位！

storybook

来源：https://github.com/storybookjs/storybook/issues/13644

3条答案

按热度按时间

isr3a4wc1#

我遇到了同样的问题。有什么新消息吗？

赞(0）回复(0）举报 3个月前

okxuctiv2#

这仍然是v7 beta的一个问题，仅供参考。希望看到一些进展...

赞(0）回复(0）举报 3个月前

jm2pwxwz3#

如果有人想要一个解决方法，可以从'utils'文件夹或故事文件夹内的其他地方导出这个：

export default function (component, property) {
    const validator = component?.props?.[property]?.validator?.toString();
    if (!component || !property || !validator) {
        console.error(`Unable to obtain validator function for ${property} property.`);
        return [];
    }
    else if(/includes/i.test(validator) === false) {
        console.error(`Validator for ${property} doesn't contain an "includes" statement`);
        return [];
    }

    const arrayMatch = validator.match(/\[([^\]]*)\]/);
    if (arrayMatch) {
        const optionsString = arrayMatch[1];
        return optionsString.split(',').map(option => option.trim().replace(/^["']/, '').replace(/["']$/, ''));
      } else {
        console.error(`No options found for ${property} property`);
      }

      return [];
}

然后在故事文件中，你可以像这样使用它：

import Button from 'components/button/Button.vue';
import getOptions from "../_utils/extractOptionsFromValidator";

export default {
	title: 'Button',
	component: Button,
	argTypes: {
		size: {
			control: {
				type: 'select',
			},
			options: getOptions(Button, 'size'),
		},
	},
};

请注意，这仅适用于具有使用includes方法的验证器方法的组件属性，例如：

const props = defineProps({
	size: {
		type: String,
		default: 'medium',
		validator: (v) => ['small', 'medium', 'large', 'x-large'].includes(v),
	}
});

赞(0）回复(0）举报 3个月前

我来回答

storybook (Vue)无法从验证器或JSDoc获取数组属性值

3条答案

相关问题

热门标签

最新问答