Question

我正在使用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({});

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>`,
});

Vue Storybook动态故事

1 个答案: