Storybook: Bagaimana cara menambahkan kenop untuk komponen vue di 6.0?

Dibuat pada 25 Nov 2020 · 1Komentar · Sumber: storybookjs/storybook

Hai. Saya sama sekali tidak tahu cara membuat kenop bekerja secara reaktif. Belum menemukan contoh apa pun di web.

Ini kode saya:

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

Ditambahkan melalui Vue CLI 4.5.0 (vue tambahkan buku cerita).

Dependensi dev yang relevan:

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

Kedua kontrol pada kedua cerita muncul, tetapi tidak ada yang mengubah properti sebenarnya.

Juga, akan berterima kasih untuk setiap contoh buku cerita opensource 6.0 dengan vue atau panduan yang relevan.

PN controls vue question / support

Sumber

Kezhich

Komentar yang paling membantu

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

untuk sekunder, Anda dapat mengikuti tata letak ini untuk properti juga.

lihat di sini untuk lebih lanjut
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL pada 26 Nov 2020

❤2

>Semua komentar

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

untuk sekunder, Anda dapat mengikuti tata letak ini untuk properti juga.

lihat di sini untuk lebih lanjut
https://storybook.js.org/docs/vue/writing-stories/args#story -args

HIMISOCOOL pada 26 Nov 2020

❤2

Apakah halaman ini membantu?

0 / 5 - 0 peringkat