Vue3 と Storybook 7 でスロットを処理する方法
<p>ButtonAsSlot ストーリーで、コンポーネント (UIButton) を別のコンポーネント (UICard) のスロットとして渡そうとしています。 </p>
<p>ButtonAsSlot ストーリーでは、<code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} を渡します。 ">',</uibutton></code> を args.default として設定するため、スロットに渡されます。 </p>
<p>既存のストーリー (例: <code>default: '<uibutton v-bind="輸入ストーリー.args">'</uibutton></code>) を渡すことができれば、次のようになります。素晴らしくなるように。しかし、これはうまくいきません。 </p>
<p>次のことを試しましたが、エラー <code>Error:Storybook で予期しない識別子 'object' </code> が発生しました。 </p>
<pre class="brush:php;toolbar:false;">constdisabledArgs = 輸入ストーリー.args
エクスポート const ButtonAsSlot: ストーリー = {
...遊び場、
render: (args, { argTypes }) => ({
コンポーネント: {UICard、UIButton}、
小道具: Object.keys(argTypes)、
設定（） {
戻る {
...引数、
}
}、
テンプレート: `
<UICard v-bind="args">
<テンプレート v-if="$props.default" v-slot>
<p>↓下に表示されるスロットの内容</p>
${args.default}
</テンプレート>
</UICard>
`、
})、
引数: {
...Playground.args,
デフォルト: `<UIButton v-bind="${disabledArgs}" />`,
},</pre>
<p>既存のストーリーを使用してコンポーネントをパラメータに渡し、スロットに設定するにはどうすればよいですか? </p>
<p>Vue3 を使用しています。コードは以下のように表示されます。</p>
<p>--Card.stories.ts</p>
<pre class="brush:php;toolbar:false;">インポート タイプ { Meta, StoryObj } から '@storybook/vue3'
「./Card.vue」からUICardをインポートします
'~/components/Clickable/Button.vue' から UIButton をインポートします
import { setDefaultProps } から '~/.storybook/utils'
const meta: メタ = {
タイトル: 'エレメント/カード',
コンポーネント: UICard、
タグ: ['autodocs']、
}
デフォルトのメタをエクスポートする
type Story = StoryObj
import const プレイグラウンド: ストーリー = {
話： {
名前: 'デフォルト'、
}、
render: (args, { argTypes }) => ({
コンポーネント: { UICard }、
小道具: Object.keys(argTypes)、
設定（） {
戻る {
...引数、
}
}、
テンプレート: `
<UICard v-bind="args">
<テンプレート v-if="$props.default" v-slot>
${args.default}
</テンプレート>
</UICard>
`、
})、
}
setDefaultProps(プレイグラウンド、UICard)
エクスポート const ButtonAsSlot: ストーリー = {
...遊び場、
話： {
名前: 'スロットとしてのボタン',
}、
render: (args, { argTypes }) => ({
コンポーネント: {UICard、UIButton}、
小道具: Object.keys(argTypes)、
設定（） {
戻る {
...引数、
}
}、
テンプレート: `
<UICard v-bind="args">
<テンプレート v-if="$props.default" v-slot>
<p>↓下に表示されるスロットの内容</p>
${args.default}
</テンプレート>
</UICard>
`、
})、
引数: {
...Playground.args,
デフォルト: '<UIButton v-bind="{タイプ: 'ボタン', isDisabled: false, バリアント: 'プライマリ', ラベル: 'テスト',}" />',
}、
}</pre>
<p><br /></p>
