搜尋

首頁  >  問答  >  主體

如何處理 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粉504920992536 天前700

全部回覆(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
  • 取消回覆