Storybook: 6.0에서 vue 컴포넌트 용 노브를 추가하는 방법은 무엇입니까?

에 만든 2020년 11월 25일 · 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 추가 스토리 북)을 통해 추가되었습니다.

가장 유용한 댓글

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 에 2020년 11월 26일

❤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 에 2020년 11월 26일

❤2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Storybook: 6.0에서 vue 컴포넌트 용 노브를 추가하는 방법은 무엇입니까?

가장 유용한 댓글

>모든 댓글

관련 문제