Vue Storybook 动态故事

Posted 2023-02-19

【中文标题】Vue Storybook 动态故事

【英文标题】：Vue Storybook dynamic story

【发布时间】：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();

【参考方案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>`,
);