Storybook: Как добавить ручки для компонентов vue в 6.0?

Созданный на 25 нояб. 2020 · 1Комментарий · Источник: storybookjs/storybook

Привет. Я совершенно не догадываюсь, чтобы ручки работали реактивно. Также не нашел примеров в сети.

Вот мой код:

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

Добавлено через Vue CLI 4.5.0 (vue add storybook).

Соответствующие зависимости разработчиков:

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

Оба элемента управления появляются в обеих историях, но ни один из них не меняет фактические свойства.

Также были бы признательны за любые примеры из сборника рассказов 6.0 с открытым исходным кодом с vue или за любые соответствующие руководства.

PN controls vue question / support

Источник

Kezhich

Самый полезный комментарий

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

для вторичного вы можете следовать этому макету и для реквизита.

смотрите здесь, чтобы узнать больше
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL 26 нояб. 2020

❤2

>Все замечания

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

для вторичного вы можете следовать этому макету и для реквизита.

смотрите здесь, чтобы узнать больше
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL 26 нояб. 2020

❤2

Была ли эта страница полезной?

0 / 5 - 0 рейтинги