当前位置：首页 > news >正文

基于element-ui二次封装后的组件如何在storybook中展示

news 2025/10/31 9:57:36

搜索了一下网上关于如何在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=trueconsole.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 查看效果