Storybook: Como adicionar botões para componentes vue no 6.0?

Criado em 25 nov. 2020 · 1Comentário · Fonte: storybookjs/storybook

Oi. Eu não tenho absolutamente nenhuma ideia quente para fazer os botões funcionarem reativamente. Não encontrei nenhum exemplo na web também.

Este é o meu código:

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>;
    },
});

Adicionado via Vue CLI 4.5.0 (vue add storybook).

Dependências de desenvolvimento relevantes:

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

Ambos os controles em ambas as histórias aparecem, mas nenhum deles muda os adereços reais.

Além disso, ficaria grato por quaisquer exemplos de livro de histórias de código aberto 6.0 com vue ou quaisquer guias relevantes.

PN controls vue question / support

Fonte

Kezhich

Comentários muito úteis

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>`,
});

para o secundário, você também pode seguir este layout para os adereços.

veja aqui para mais
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL em 26 nov. 2020

❤2

>Todos os comentários

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>`,
});

para o secundário, você também pode seguir este layout para os adereços.

veja aqui para mais
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL em 26 nov. 2020

❤2

Esta página foi útil?

0 / 5 - 0 avaliações