如何映射枚举以选择 Storybook 中的下拉列表？

Posted 2023-02-19

【中文标题】如何映射枚举以选择 Storybook 中的下拉列表？

【英文标题】：How to map enum to select dropdown in Storybook?

【发布时间】：2021-07-31 16:46:34

【问题描述】：

我有一个像这样的简单 JS“枚举”

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();

Example from docs 不工作。

我有一个 select 下拉菜单工作，但它从映射返回 String 而不是 Number。

我在控制台的故事书中收到错误：

[Vue warn]: Invalid prop: type check failed for prop "oemId". Expected Number with value NaN, got String with value "Aaa".

如何将枚举映射到 Storybook 中的选择下拉菜单？

【参考方案1】：

那个故事书文档的例子绝对是恐怖的。 这是一个可以立即向您展示如何操作的示例。

myValueList: 
      options: [0, 1, 2], // iterator
      mapping: [12, 13, 14], // values
      control: 
        type: 'select', 
        labels: ['twelve', 'thirteen', 'fourteen'],
      ,
    

【参考方案2】：

您正在寻找Object.values 而不是.keys。

const MyEnum = 
    Aaa: 1,
    Bbb: 84,
;

Object.values(MyEnum); // -> [ 1, 84 ]
Object.keys(MyEnum);   // -> [ "Aaa", "Bbb" ]

【讨论】：

嗯...但是如何将字符串值映射到故事书中的 int 值？