<p>Saya cuba menghantar komponen (UIButton) sebagai slot dalam komponen lain (UICard) dalam cerita ButtonAsSlot. </p> <p>Dalam cerita ButtonAsSlot, saya lulus <kod>lalai: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} ">',</uibutton></code> sebagai args.default, jadi ia akan dihantar dalam slot. </p> <p>Jika saya boleh menghantar cerita sedia ada (cth. <kod>lalai: '<uibutton v-bind="ImportedStory.args">'</uibutton></code>) maka Itu akan menjadi hebat. Walau bagaimanapun, ini tidak berfungsi. </p> <p>Saya mencuba yang berikut tetapi mendapat ralat <kod>Ralat: 'objek' pengecam yang tidak dijangka </code> </p> <pre class="brush:php;toolbar:false;">const disabledArgs = ImportedStory.args eksport const ButtonAsSlot: Cerita = { ...Taman permainan, render: (args, { argTypes }) => komponen: { UICard, UIButton }, props: Object.keys(argTypes), persediaan() { kembali { ... args, } }, templat: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Kandungan slot dipaparkan di bawah</p> ${args.default} </template> </UICard> `, }), args: { ...Taman Permainan.args, lalai: `<UIButton v-bind="${disabledArgs}" />`, },</pre> <p>Bagaimanakah saya boleh menghantar komponen menggunakan cerita sedia ada dalam parameter dan menetapkannya dalam slot? </p> <p>Saya menggunakan Vue3. kod tunjukkan seperti di bawah.</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">jenis import { Meta, StoryObj } daripada '@storybook/vue3' import UICard daripada './Card.vue' import UIButton daripada '~/components/Clickable/Button.vue' import { setDefaultProps } daripada '~/.storybook/utils' meta const: Meta<jenis UICard> = { tajuk: 'Elemen/Kad', komponen: UICard, tag: ['autodocs'], } eksport meta lalai jenis Cerita = StoryObj<jenis UICard> export const Taman Permainan: Cerita = { cerita: { nama: 'Lalai', }, render: (args, { argTypes }) => ({ komponen: { UICard }, props: Object.keys(argTypes), persediaan() { kembali { ... args, } }, templat: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> ${args.default} </template> </UICard> `, }), } setDefaultProps(Taman Permainan, UICard) eksport const ButtonAsSlot: Cerita = { ...Taman permainan, cerita: { nama: 'Butang sebagai slot', }, render: (args, { argTypes }) => ({ komponen: { UICard, UIButton }, props: Object.keys(argTypes), persediaan() { kembali { ... args, } }, templat: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Kandungan slot dipaparkan di bawah</p> ${args.default} </template> </UICard> `, }), args: { ...Taman Permainan.args, lalai: '<UIButton v-bind="{type: 'button', isDisabled: false, variant: 'primary', label: 'test',}" />', }, }</pre> <p><br /></p>

import { Disabled } from 'disabled.stories'

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