Comment gérer les emplacements dans Vue3 et Storybook 7
<p>J'essaie de transmettre un composant (UIButton) comme emplacement dans un autre composant (UICard) dans l'histoire ButtonAsSlot. </p>
<p>Dans l'histoire ButtonAsSlot, je passe <code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} ">',</uibutton></code> comme args.default, il sera donc transmis dans l'emplacement. </p>
<p>Si je pouvais transmettre une histoire existante (par exemple <code>default : '<uibutton v-bind="ImportedStory.args">'</uibutton></code>), alors ce serait super. Cependant, cela ne fonctionne pas. </p>
<p>J'ai essayé ce qui suit, mais j'ai obtenu l'erreur <code>Erreur : identifiant inattendu de l'objet </code> sur Storybook. </p>
<pre class="brush:php;toolbar:false;">const désactivéArgs = ImportedStory.args
exporter const ButtonAsSlot : Histoire = {
...Cour de récréation,
rendu : (args, { argTypes }) =>
composants : { UICard, UIButton },
accessoires : Object.keys (argTypes),
installation() {
retour {
...arguments,
}
},
modèle : `
<UICard v-bind="args">
<template v-if="$props.default" v-slot>
<p>↓Contenu de l'emplacement affiché ci-dessous</p>
${args.default}
</modèle>
</UICard>
',
}),
arguments : {
...Aire de jeux.args,
par défaut : `<UIButton v-bind="${disabledArgs}" />`,
},</pré>
<p>Comment puis-je transmettre un composant en utilisant une histoire existante dans un paramètre et le définir dans un emplacement ? </p>
<p>J'utilise Vue3. le code s'affiche comme ci-dessous.</p>
<p>--Card.stories.ts</p>
<pre class="brush:php;toolbar:false;">type d'importation { Meta, StoryObj } depuis '@storybook/vue3'
importer UICard depuis './Card.vue'
importer UIButton depuis '~/components/Clickable/Button.vue'
importer { setDefaultProps } depuis '~/.storybook/utils'
const meta : Meta<typeof UICard> = {
titre : 'Éléments/Carte',
composant : UICard,
balises : ['autodocs'],
}
exporter la méta par défaut
tapez Story = StoryObj<typeof UICard>
export const Aire de jeu : Histoire = {
histoire: {
nom : 'Par défaut',
},
rendu : (args, { argTypes }) => ({
composants : { UICard },
accessoires : Object.keys (argTypes),
installation() {
retour {
...arguments,
}
},
modèle : `
<UICard v-bind="args">
<template v-if="$props.default" v-slot>
${args.default}
</modèle>
</UICard>
',
}),
}
setDefaultProps (aire de jeux, UICard)
exporter const ButtonAsSlot : Histoire = {
...Cour de récréation,
histoire: {
nom : 'Bouton comme emplacements',
},
rendu : (args, { argTypes }) => ({
composants : { UICard, UIButton },
accessoires : Object.keys (argTypes),
installation() {
retour {
...arguments,
}
},
modèle : `
<UICard v-bind="args">
<template v-if="$props.default" v-slot>
<p>↓Contenu de l'emplacement affiché ci-dessous</p>
${args.default}
</modèle>
</UICard>
',
}),
arguments : {
...Aire de jeux.args,
par défaut : '<UIButton v-bind="{type : 'bouton', isDisabled : false, variante : 'primary', label : 'test',}" />',
},
}</pré>
<p><br /></p>
