Vue Storybook 动态故事答案

【问题标题】：Vue Storybook dynamic storyVue Storybook 动态故事
【发布时间】：2021-01-23 14:45:08
【问题描述】：

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

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

对于我在这里尝试的内容是否有更好的解决方案？似乎故事书文档中没有任何内容可用于创建动态故事书组件。也许我可以使用加载图标的 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({});

【问题讨论】：

标签： vue.js storybook

【解决方案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>`,
});

【讨论】：