美文网首页
基于element-ui二次封装后的组件如何在storybook

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

作者: 该帐号已被查封_才怪 | 来源:发表于2021-04-08 15:04 被阅读0次

    搜索了一下网上关于如何在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、根据要求安装所需要的插件。

    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 查看效果

    image.png
    6、各个面板介绍
    image.png

    三、注意点

    ·1、默认触发事件及回调事件需要以on开头才可以在Actions上看到事件及传参的数据(storybook/vue6.2.8没有这个要求了)。

    image.png
    这个的话,大家看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

    相关文章

      网友评论

          本文标题:基于element-ui二次封装后的组件如何在storybook

          本文链接:https://www.haomeiwen.com/subject/dxpmkltx.html