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

【问题标题】：How to map enum to select dropdown in Storybook?如何映射枚举以选择 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 中的选择下拉菜单？

【问题讨论】：

标签： javascript vue.js 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 值？