如何使用 Storybook 的旋钮将组件动态插入到模板中

Question

我是故事书的初学者，试图创建一个简单按钮和一个带有图标的按钮的故事。我希望能够从旋钮部分切换按钮中的图标。例如：

export const textButton = () => ({
  components: { PButton },
  template: `<p-button
      :color="color"
      :text="label"
    />`,
  props: {
    color: {
      default: select(
        "color",
        ["transparent", "black", "blue", "orange"],
        "black"
      )
    },
    label: { default: text("label", "Button") }
  }
});

以上是一个简单按钮的故事，我可以从旋钮部分切换颜色。同样，我想要模板的正确语法，以便我可以切换按钮内的图标，这些图标是单独的组件。


    export const textWithIcon = () => ({
      components: { PButton, Arrow, Bullet, Check, Chevron, Cross, Delete, Edit, Info, Lock, Play, Plus, Search, UpDown, Upload },
      template: `<p-button
        :text="label"
        :color="color"
      >
        <template v-slot:icon>{{icon}}</template>
      </p-button>`,
      props: {
        icon: {
          default: select('icon', ['<Arrow />', '<Bullet />', '<Check />', '<Chevron />', '<Cross />', '<Delete />', '<Edit />', '<Info />', '<Lock />', '<Play />', '<Plus />', '<Search />', '<UpDown />', '<Upload />'], '<Arrow />'),
        },
        label: { default: text('label', 'Button') },
      },
    });

我该如何实现？什么是正确的格式？有人请指导我，或向文档发送 link。我找不到与此要求相关的任何内容。

Answer 1

我使用

解决了这个问题

<component v-bind:is="currentTabComponent"></component>

所以我只需要为组件提供名称字符串，确保导入所有组件。

如何使用 Storybook 的旋钮将组件动态插入到模板中

How to dynamically insert component in to template using knobs for Storybook

javascript

vue.js

storybook

storybook-addon-specifications