storybook让组件自动形成好看的文档~ - 掘金
storybook 是什么
storybook 是一个 JS 库，可以在已有项目，在无需修改业务逻辑的情況下，给组件自动形成文档，可很好的展示属性和功能。
怎么安装
在已有的项目里，一行命令安装
bash
复制代码
npx storybook init
此时项目里增加了一些文件：
.storybook文件夹，里面是配置src/stories，展示组件，我们的重点package.json会多两个命令，- "storybook": "start-storybook -p 6006 -s public",
- "build-storybook": "build-storybook -s public"
先运行起来，看看
bash
复制代码
npm run story
开始写 story
第一步，像平时一样，写组件。
比如这边，来个Button.jsx
jsx
复制代码
`import PropTypes from 'prop-types';
const Button = ({ label, backgroundColor = 'red', onClick }) => {
return (
<button style={{ backgroundColor, color: '#fff' }} onClick={onClick}>
{label}
</button>
);
};
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
onClick: PropTypes.func,
};
export default Button;
`
第二步，新建Button.stores.jsx
jsx
复制代码
`import Button from './Button';
export default {
title: 'Button', // 标题
component: Button, // 哪个组件
};
// 组件展示的例子
export const Red = () => <Button label="red" backgroundColor="red" />;
export const Blue = () => <Button label="blue" backgroundColor="blue" />;`
title有路径的话，自动在左侧菜单形成文件夹。
此时，重新访问网址
为增强可读性，我们应该为组件编写
propTypes
增加 - Controls 动态修改属性显示
展示的两个例子，并不能修改，其实可以升级，在页面随时编辑，随时显示。 其实很简单，将上面的代码微改造下
jsx
复制代码
`import Button from './Button';
export default {
title: 'Button', // 标题
component: Button, // 哪个组件
};
// 先写模版
const Template = (args) => <Button {...args} />;
// 写例子，例子的模版都是一样的，只是属性不一样
// Template.bind({}) is a standard JavaScript technique for making a copy of a function. We copy the Template so each exported story can set its own properties on it.
export const Red = Template.bind({});
Red.args = {
label: 'red',
backgroundColor: 'red',
};
export const Blue = Template.bind({});
Blue.args = {
label: 'blue',
backgroundColor: 'blue',
};`
增加 - Actions 事件用法
上面都是属性，现在增加事件onClick。
jsx
复制代码
`const Button = ({ label, backgroundColor = 'red', onClick }) => {
return (
<button style={{ backgroundColor, color: '#fff' }} onClick={onClick}>
{label}
</button>
);
};
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
onClick: PropTypes.func,
};
export default Button;`
看下配置文件，发现当属性以on开头的话，会自动识别为action 如果不以on开头的话，需要额外说明。
jsx
复制代码
`const Button = ({ label, backgroundColor = 'red', handleClick }) => {
return (
<button style={{ backgroundColor, color: '#fff' }} onClick={handleClick}>
{label}
</button>
);
};
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
handleClick: PropTypes.func,
};
export default Button;`
想要示例里，按钮能绑定事件的话
jsx
复制代码
`export default {
title: 'Button', // 标题
component: Button, // 哪个组件
argTypes: { handleClick: { action: 'handleClick' } },
};`
增加 - children 的处理
这边简单增加一个布局组件，体验下children的处理。
jsx
复制代码
`import PropTypes from 'prop-types';
const Stack = ({ children, direction = 'row', spacing = 2 }) => (
<div
style={{ display: 'flex', gap: spacing + 'px', flexDirection: direction }}
{children}
</div>
);
Stack.propTypes = {
spacing: PropTypes.number,
direction: PropTypes.oneOf(['row', 'column']),
};
export default Stack;`
感觉还是很普通的。 来个文档：
jsx
复制代码
`import Stack from './Stack';
export default {
title: 'Stack', // 标题
component: Stack, // 哪个组件
argTypes: {
countOfChild: { type: 'number', defaultValue: 3 },
},
};
// 先写模版
const style = {
display: 'flex',
width: '50px',
height: '50px',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f69',
color: '#fff',
};
const Template = ({ countOfChild, ...args }) => (
<Stack {...args}>
{new Array(countOfChild).fill('').map((_, index) => (
<div style={style} key={index}>
{index + 1}
</div>
))}
</Stack>
);
export const Horizontal = Template.bind({});
Horizontal.args = {
direction: 'row',
spacing: 10,
};
export const Vertical = Template.bind({});
Vertical.args = {
direction: 'column',
spacing: 10,
};`
argTypes 的属性，只是添加到示例里面，来方便示例的展示，跟真实的组件属性没有关系。
Vue 类项目添加 storybook
上面步骤基本一致，唯一不同的就是组件的写法，不一致。 Button.vue:
vue
复制代码
`<template>
<button
type="button"
@click="onClick"
:style="{ backgroundColor, color: '#fff' }"
{{ label }}
</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: {
type: String,
required: true,
},
backgroundColor: {
type: String,
default: '#f69',
},
},
methods: {
onClick() {
this.$emit('onClick');
},
},
};
</script>`
Button.stories.js:
jsx
复制代码
`import Button from './Button';
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
title: 'Button',
component: Button
};
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button @onClick="onClick" v-bind="$props" />'
});
export const Red = Template.bind({});
Red.args = {
label: 'Red',
backgroundColor: 'red'
};
export const Blue = Template.bind({});
Blue.args = {
label: 'Blue',
backgroundColor: 'blue'
};
`
Stories 部署访问
先运行命令：
bash
复制代码
`# npm run build-storybook
yarn build-storybook`
根目录下会多一个文件夹storybook-static，部署即可，本地可以进到目录，然后anywhere 9000即可访问
其他借鉴的例子
引用
原网址: 访问
创建于: 2024-01-07 01:34:57
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论