Storybook: Comment ajouter des boutons pour les composants vue dans la version 6.0?

Créé le 25 nov. 2020 · 1Commentaire · Source: storybookjs/storybook

Salut. Je n'ai absolument aucune idée de faire fonctionner les boutons de manière réactive. Je n'ai trouvé aucun exemple sur le Web non plus.

Voici mon code:

import ElBtn from '../components/elements/buttons/el-btn.vue';

export default {
    title: 'El-Btn',
    component: ElBtn,
    decorators: [() => `<section class="container"><story /></section>`],
    argTypes: {
        type: { control: { type: 'select', options: ['secondary', 'primary'] } },
        round: { control: { type: 'boolean', default: false } },
    },
};

export const primary = () => ({
    components: { ElBtn },
    template: `<el-btn>Text</el-btn>`,
});

export const secondary = () => ({
    props: {
        type: { control: { type: 'select', options: ['secondary', 'primary'] } },
    },
    render() {
        return <ElBtn type="this.type">Test</ElBtn>;
    },
});

Ajouté via Vue CLI 4.5.0 (vue add storybook).

Dépendances de développement pertinentes:

    "@storybook/addon-essentials": "^6.0.26",
    "@storybook/addon-links": "^6.0.26",
    "@storybook/vue": "^6.0.26",

Les deux contrôles sur les deux histoires apparaissent, mais aucun d'entre eux ne modifie les accessoires réels.

Je serais également reconnaissant pour tout exemple de livre de contes open source 6.0 avec vue ou tout guide pertinent.

PN controls vue question / support

Source

Kezhich

Commentaire le plus utile

export const primary = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { ElBtn },
    // v-bind by itself takes every key in the value and v-binds them to a field on this component
    // $props is every prop on the `primary` component
    template: `<el-btn v-bind="$props">Text</el-btn>`,
});

pour le secondaire, vous pouvez également suivre cette disposition pour les accessoires.

voir ici pour plus
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL le 26 nov. 2020

❤2

>Tous les commentaires

export const primary = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { ElBtn },
    // v-bind by itself takes every key in the value and v-binds them to a field on this component
    // $props is every prop on the `primary` component
    template: `<el-btn v-bind="$props">Text</el-btn>`,
});

pour le secondaire, vous pouvez également suivre cette disposition pour les accessoires.

voir ici pour plus
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL le 26 nov. 2020

❤2

Cette page vous a été utile?

0 / 5 - 0 notes