如何处理 Vue3 和 Storybook 7 中的插槽

Question

<p>我正在尝试将一个组件（UIButton）作为 ButtonAsSlot 故事中另一个组件（UICard）中的插槽传递。</p> <p>在 ButtonAsSlot 故事中，我传递 <code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',}">',</uibutton></code> 作为 args.default，因此它将在插槽中传递。</p> <p>如果我可以传递现有的故事（例如<code>默认值：'<uibutton v-bind="ImportedStory.args">'</uibutton></code>），那就太好了。然而，这是行不通的。</p> <p>我尝试了以下操作，但出现错误<code>错误：Storybook 上出现意外的标识符“对象”</code>。</p> <pre class="brush:php;toolbar:false;">const disabledArgs = ImportedStory.args export const ButtonAsSlot: Story = { ...Playground, render: (args, { argTypes }) => ({ components: { UICard, UIButton }, props: Object.keys(argTypes), setup() { return { ...args, } }, template: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Content of slot displayed below</p> ${args.default} </template> </UICard> `, }), args: { ...Playground.args, default: `<UIButton v-bind="${disabledArgs}" />`, },</pre> <p>如何使用参数中的现有故事传递组件并将其设置在插槽中？</p> <p>我使用的是Vue3。代码如下。</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">从 '@storybook/vue3' 导入类型 { Meta, StoryObj } 从 './Card.vue' 导入 UICard 从 '~/components/Clickable/Button.vue' 导入 UIButton 从 '~/.storybook/utils' 导入 { setDefaultProps } const meta: Meta = { title: '元素/卡片', 组件：UI卡， 标签：['自动文档']， } 导出默认元 type Story = StoryObj; 导出 const Playground: 故事 = { 故事： { 名称：'默认'， }, 渲染：(args, { argTypes }) => ({ 组件：{UICard}， 道具：Object.keys（argTypes）， 设置（） { 返回 { ...参数， } }, 模板：` <UICard v-bind="args"> <模板 v-if="$props.default" v-slot> ${args.default} </模板> </UI卡> `, }), } setDefaultProps（游乐场，UICard） 导出 const ButtonAsSlot: 故事 = { ...操场， 故事： { name: '按钮作为插槽', }, 渲染：(args, { argTypes }) => ({ 组件：{ UICard，UIButton }， 道具：Object.keys（argTypes）， 设置（） { 返回 { ...参数， } }, 模板：` <UICard v-bind="args"> <模板 v-if="$props.default" v-slot> <p>↓下面显示的槽位内容</p> ${args.default} </模板> </UI卡> `, }), 参数：{ ...游乐场.args， 默认值：''， }, }</pre> <p><br />></p>

Answer 1

最后我像这样编写了代码并且它起作用了。

import { Disabled } from 'disabled.stories'

export const ButtonAsSlot: Story = {
  ...Playground,
  args: {
    ...Playground.args,
    disabledArgs: {
      ...Disabled.args,
    },
    default: '<UIButton v-bind="disabledArgs" />',
  },
}