搜索

首页  >  问答  >  正文

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

<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>
P粉504920992P粉504920992487 天前662

全部回复(1)我来回复

  • P粉154798196

    P粉1547981962023-08-26 15:12:00

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

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

    回复
    0
  • 取消回复