Vue Storybook动态故事

Question

我正在使用Storybook列出项目中的所有图标。图标列表在下拉列表中使用。我需要加载SVG图标来解析成<van-icon />组件。

我下面的代码正确地加载了一个图标，但问题是，当您更改下拉列表中的值时，组件不会更新。

对于我在这里尝试的东西，有没有更好的解决方案？似乎在Storybook文档中没有用于创建动态storybook组件的任何内容。也许我可以用createcomponent手动创建一个加载图标的组件？

import Icons from './index';

export default {
  title: 'Components/Icon',
  argTypes: {
    size: {
      control: { type: 'range', min: 10, max: 500 },
      defaultValue: 50,
    },
    name: {
      control: { type: 'select', options: Icons },
      defaultValue: Icons[0],
    },
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `<van-icon v-bind="$props" :name="getIcon()" />`,
  methods: {
    getIcon() {
      return args.name ? require(`../../assets/icons/${args.name}.svg`) : '';
    },
  },
});

export const Default = Template.bind({});

Answer 1

我有一个类似的问题，我没有正确绑定道具。我在这里发布我的代码可能会有帮助：

import DragIconComponent from "../components/DragIcon.vue";

const argTypes = {
  backgroundColor: { control: "color" },
};

export default {
  title: "Drag Icon",
  argTypes,
};

export const DragIcon = () => ({
  components: { DragIconComponent },
  props: { ...argTypes },
  template: `<div class="some-class">
      <DragIconComponent :mainColor="backgroundColor" />
    </div>`,
});