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

对于中学，您也可以按照此布局布置道具。

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

对于中学，您也可以按照此布局布置道具。

HIMISOCOOL 于 2020-11-26

❤2

此页面是否有帮助？

0 / 5 - 0 等级

Storybook: 如何在6.0中为vue组件添加旋钮？

最有用的评论

>所有评论

相关问题