搜索了一下网上关于如何在storybook中引入基于element-ui二次封装后的组件的资料几乎没用或者比较老旧,而且storybook初看文档有点不太友好,自己硬着头皮按照文档测试了一遍自己之前写的UI组件引入到storybook,在踩过一些坑后整理一下供大家参考。
一、storybook的作用
1、可以避免公司前端重复造轮子
统一放在storybook上,其他前端可以在这里看到其他成员是否实现过自己将要实现的组件。
2、提升组件通用性
storybook内的组件可以与业务解耦。
3、可以自动生成使用文档和示例
image.png
4、轻松实现结构化组件文档
5、方便手动在线测试
二、如何在vue2.x+element-ui中引入
1、按照storybook文档安装即可;我的是vue2项目,因此运行即可
npx sb init
2、根据要求安装所需要的插件。
- a、安装插件时注意兼容性:https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md
- b、插件大全https://storybook.js.org/addons/
这里我安装一下storysource插件,可以方便查看源码。
image.png
npm i @storybook/addon-storysource --dev
在.storybook/main.js
addons部分添加"@storybook/addon-storysource"
如下
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-storysource" // 新增
]
}
3、启动storybook
npm run storybook
4、按照示例编写你自己的组件xxxx.stories.js文件并放置在storybook的示例文件目录下(src/stories)
DialogWithBtn.stories.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)
import MyDialogWithBtn from './DialogWithBtn.vue';
export default {
title: 'Example/DialogWithBtn',
component: MyDialogWithBtn,
argTypes: {
visible: { control: { type: 'boolean'},description:'控制是否可见' },
title:{ control: { type: 'text'},description:'设置对话框顶部标题' },
onCancelEvent:{description:'点击取消后的回调事件'},
onSureEvent:{description:'点击确定后的回调事件',action: 'clicked'},
'update:visible':{description:'同步visible数值(该参数不涉及修改,可忽略)'},
default:{description:'底部按钮之前的默认插槽(该参数不涉及修改,可忽略)'},
footer:{description:'底部按钮footer具名插槽(该参数不涉及修改,可忽略)'},
},
};
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { MyDialogWithBtn },
template: '<div><el-button @click="onShowDialog">点我显示对话框</el-button> <my-dialog-with-btn @onSureEvent="onSureEvent" @onCancelEvent="onCancelEvent" :visible.sync="visible" :title="title">对话框啊</my-dialog-with-btn></div>',
methods:{
onShowDialog(){
this.visible=true
console.log('展示了')
},
}
});
export const dialogWithBtn = Template.bind({});
dialogWithBtn.args = {
title: '对话框1',
};
// export const dialogWithBtn2 = Template.bind({});
// dialogWithBtn2.args = {
// title: '对话框2',
// };
值得指出的是我这里偷了懒,直接全部引入了element-ui,你们可以也可以按需引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)
DialogWithBtn.vue 我也直接放这个目录了,你可以放置你实际的目录位置中并正确引入即可。
DialogWithBtn.vue
<template>
<el-dialog :visible.sync="visibleDialog" v-bind="$attrs" v-on="$listeners">
<slot></slot>
<template #footer>
<slot name="footer">
<div class="dialog-footer-ct">
<el-button @click="cancelOp">取 消</el-button>
<el-button @click="sureOp" type="primary">确 定</el-button>
</div>
</slot>
</template>
</el-dialog>
</template>
<script>
export default {
name: 'dialog-with-btn',
props: {
visible: {
default: false,
type: Boolean,
},
},
computed: {
visibleDialog: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
},
},
},
methods: {
cancelOp() {
this.$emit('onCancelEvent')
this.visibleDialog = false;
},
sureOp() {
this.$emit('onSureEvent')
this.visibleDialog = false;
},
},
// data:{
// return {
// visibleDialog
// }
// }
}
</script>
<style scoped>
.dialog-footer-ct{
margin: 10px auto;
text-align: center;
}
</style>
5、进入http://localhost:6006/?path=/story/example-dialogwithbtn--dialog-with-btn 查看效果
6、各个面板介绍
image.png
三、注意点
·1、默认触发事件及回调事件需要以on开头才可以在Actions上看到事件及传参的数据(storybook/vue6.2.8没有这个要求了)。
这个的话,大家看
preview.js
就知道为啥了。image.png
2、记得在
DialogWithBtn.stories.js
中引入element-ui并注册,否则将报错3、示例组件的参数记得填全且属性值记得别写死而应该与argTypes保持一致。
image.png
4、demo已上传至 github https://github.com/have-not-BUG/vue-element-ui-storybook-demo
网友评论