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

Question

我有一个像这样的简单 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({});

文档中的示例不起作用。

我有一个select下拉菜单，但它返回 aString而不是Number来自映射。

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

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

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

标签： javascriptvue.jsstorybook

Answer 1

那个故事书文档的例子绝对是恐怖的。这是一个示例，它将立即向您展示该做什么。

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