Cara mengendalikan slot dalam Vue3 dan Buku Cerita 7

Question

Saya cuba menghantar komponen (UIButton) sebagai slot dalam komponen lain (UICard) dalam cerita ButtonAsSlot.

Dalam cerita ButtonAsSlot, saya lulus lalai: '', sebagai args.default, jadi ia akan dihantar dalam slot.

Jika saya boleh menghantar cerita sedia ada (cth. lalai: '') maka Itu akan menjadi hebat. Walau bagaimanapun, ini tidak berfungsi.

Saya mencuba yang berikut tetapi mendapat ralat Ralat: 'objek' pengecam yang tidak dijangka

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}" />`,
  },

Bagaimanakah saya boleh menghantar komponen menggunakan cerita sedia ada dalam parameter dan menetapkannya dalam slot?

Saya menggunakan Vue3. kod tunjukkan seperti di bawah.

--Card.stories.ts

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',}" />',
  },
}

Answer 1

Akhirnya saya menulis kod seperti ini dan ia berfungsi.

import { Disabled } from 'disabled.stories'

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