如何处理 Vue3 和 Storybook 7 中的插槽
P粉504920992
2023-08-26 00:23:54
<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>
最后我像这样编写了代码并且它起作用了。
import { Disabled } from 'disabled.stories' export const ButtonAsSlot: Story = { ...Playground, args: { ...Playground.args, disabledArgs: { ...Disabled.args, }, default: '<UIButton v-bind="disabledArgs" />', }, }