如何處理 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" />', }, }