如何处理 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;">import type { Meta, StoryObj } from '@storybook/vue3'
import UICard from './Card.vue'
import UIButton from '~/components/Clickable/Button.vue'
import { setDefaultProps } from '~/.storybook/utils'
const meta: Meta<typeof UICard> = {
title: 'Elements/Card',
component: UICard,
tags: ['autodocs'],
}
export default meta
type Story = StoryObj<typeof UICard>
export const Playground: Story = {
story: {
name: 'Default',
},
render: (args, { argTypes }) => ({
components: { UICard },
props: Object.keys(argTypes),
setup() {
return {
...args,
}
},
template: `
<UICard v-bind="args">
<template v-if="$props.default" v-slot>
${args.default}
</template>
</UICard>
`,
}),
}
setDefaultProps(Playground, UICard)
export const ButtonAsSlot: Story = {
...Playground,
story: {
name: 'Button as slots',
},
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="{type: 'button', isDisabled: false, variant: 'primary', label: 'test',}" />',
},
}</pre>
<p><br /></p>
1
950
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
最后我像这样编写了代码并且它起作用了。
import { Disabled } from 'disabled.stories' export const ButtonAsSlot: Story = { ...Playground, args: { ...Playground.args, disabledArgs: { ...Disabled.args, }, default: '<UIButton v-bind="disabledArgs" />', }, }