storybook - 强制状态，例如为故事书中的复选框检查 =“true”？

Question

我有自定义样式的复选框。Storybook 中有没有办法让复选框被选中，这样您就不必单击它来查看此状态？

标签： storybook

Answer 1

这是一项正在进行的工作，尚未完全发挥作用，但它确实通过了道具，所以我只是让故事书合作。

故事书插件伪状态真的应该内置这个......

我正在使用 jsx 方法，但差异可以忽略不计。

我昨晚刚开始学习 Vue 和 storybook，所以这对我来说很新，我稍后会发布一个功能齐全的版本。

Checkbox.stories.js

export const CheckBoxChecked = Template.bind({});
CheckBoxChecked.args = {
    label: 'Checked',
    checked: true,
};

复选框.jsx

import Vue from 'vue';
import { styled, VueEmotion } from '@egoist/vue-emotion';

import './checkbox.css';

Vue.use(VueEmotion);

const Label = styled('label')`
`

const Input = styled('input')`
    opacity: 0;
    width: 1em;
    height: 1em;
`

export default {
    name: 'CheckBox',
    props: {
        label: {
            type: String,
            required: true,
        },
        checked: {
            type: Boolean,
            default: false
        },
render (h) {
        return (
            <Label>
                <Input type="checkbox" checked={this.checked} />
            </Label>
        )
    }
}