如何将枚举映射到Storybook中的选择下拉列表？
如何将枚举映射到Storybook中的选择下拉列表？
提问于 2021-05-10 17:13:48
我有一个简单的JS "enum“，如下所示
const MyEnum = {
Aaa: 1,
Bbb: 84,
};我有一个简单的故事：
import MyEnum from 'models/my-enum';
import HotSpot from 'hot-spot/hot-spot.vue';
import hotSpotProp from './hot-spot.stories.defaults';
export default {
title: 'components/catalog/images/HotSpot',
args: {
hotspotProp: hotSpotProp,
currentWidth: 360,
selectedCallouts: [],
calloutMode: true,
originalWidth: 2100,
title: 'Example tooltip',
},
argTypes: {
oemId: {
options: Object.keys(MyEnum), // an array of serializable values
mapping: MyEnum, // maps serializable option values to complex arg values
control: {
type: 'select', // type 'select' is automatically inferred when 'options' is defined
// labels: MyEnum,
},
},
},
};
const Template = (args, { argTypes }) => ({
components: { HotSpot },
template: `<HotSpot v-bind="$props" />`,
props: Object.keys(argTypes),
});
export const Default = Template.bind({});我有一个select下拉菜单，但它返回的是一个String，而不是来自映射的Number。
我在控制台的故事书中得到一个错误：
[Vue warn]: Invalid prop: type check failed for prop "oemId". Expected Number with value NaN, got String with value "Aaa".如何将枚举映射到Storybook中的选择下拉列表？
回答 2
Stack Overflow用户
发布于 2021-09-30 10:13:40
这个故事书文档的例子绝对是恐怖的。这里有一个示例，它将立即向您展示如何操作。
myValueList: {
options: [0, 1, 2], // iterator
mapping: [12, 13, 14], // values
control: {
type: 'select',
labels: ['twelve', 'thirteen', 'fourteen'],
},
}Stack Overflow用户
发布于 2021-05-16 07:34:59
您要找的是Object.values，而不是.keys。
const MyEnum = {
Aaa: 1,
Bbb: 84,
};
Object.values(MyEnum); // -> [ 1, 84 ]
Object.keys(MyEnum); // -> [ "Aaa", "Bbb" ]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67467762
复制相关文章
相似问题
腾讯云开发者
