阅读源码入门实践系列之 element ui(1)

·  阅读 727
阅读源码入门实践系列之 element ui(1)

1、为啥要写本篇?

  • 有好几个小伙伴问我如何去阅读源码?如何成为开源项目贡献者? 短暂思考后先带你入门,回答第一部分

ps: 这篇不是告诉你如何理解每部分内容,会说个主要过程,然后写一个组件来说明这个事情

2、怎么拿到源码?

  • 1、 上github 搜索 element

  • 2、去官网 然后 找到入口

github.com/ElemeFE/ele…

image.png

  • 3、拿到本地
git clone git@github.com:ElemeFE/element.git

复制代码
  • 4、跑起来(安装依赖 yarn/npm i , 暂不跑)

3、如何读源码?

  • 这个网上有很多的思路,此处 仅展示我的思路
0、最好看源码之前,使用过这个产品 比如 element ui
1、先看文件夹主要结构 先看 package.json 重点关注 script 里面的内容 告诉你怎么跑脚本
2、看 src 然后 找 index.js 入口文件
3、找到 单个组件 比如 此处以 Button 组件为例
4、主要看 主体 如何 封装 templete,然后 事件怎么向上抛出的 $emit ,这两块 我相信都能看懂啥意思
5、scss 在哪里 ? 
6、常量定义在哪里 ?
7、写完之后  test 测试 写在哪里 ?
8、其他部分先不仔细说明了 
复制代码
  • index.js 入口文件

image.png

  • Button 组件为例

image.png

  • scss 在哪里 ?

image.png

  • 常量定义在哪里 ?

image.png

image.png

4、按照这种思路写一个组件?

  • 这个组件为初版本,请勿较真,仅做学习讨论,自然有很多优化点
<template>
    <div>
        <div class="button_container">
            <span class="button_text">{{ formItemValue.formLabel }}</span>
            <div class="button_right">
                <pf-button @click="handleAddFormItem">{{ formItemValue.add }}</pf-button>
                <Form class="page-detail-form" ref="whiteListForm" :model="formData" :rules="rules" labelPosition="left">
                    <FormItem>
                        <div class="button_group">
                            <pf-upload action="" :before-upload="beforeUpload" :multiple="false" accept=".xls,.xlsx">
                                <pf-button type="ghost">{{ formItemValue.moreAdd }}</pf-button>
                            </pf-upload>
                        </div>
                    </FormItem>
                </Form>
                <pf-button @click="deleteAllFormItem">{{ formItemValue.deleteAll }}</pf-button>
                <pf-button type="ghost" @click="downloadTemplate">{{ formItemValue.downLoadExcel }}</pf-button>
            </div>
        </div>
        <hr />
        <div>
            <span class="button_text button_text_order">{{ formItemValue.order }}</span>
            <span class="button_text ">{{ formItemValue.name }}</span>
        </div>
        <Form :model="formItem" :label-width="80">
            <FormItem v-for="item in formItem" :key="item.prop" :prop="item.prop" :label="item.label">
                <span>{{ item.order_number }}</span>
                <Input v-model="item.input"></Input>
                <pf-button @click="handleDeleteItemSelf(item.order_number)">{{ item.delete }}</pf-button>
            </FormItem>
        </Form>
        <pf-button class="button_right" @click="handleModalShow">{{ formItemValue.submit }}</pf-button>
        <Modal v-model="formItemValue.show" title="确认提交吗?" style="textAlign:center"></Modal>
    </div>
</template>

<script>
import { xlsxUtils } from '@/utils/xslx';
export default {
    name: 'package',
    components: {},
    data() {
        return {};
    },
    props: ['formItem', 'formItemValue', 'delete', 'deleteAll', 'add'],
    computed: {},
    methods: {
        handleModalShow() {
            this.formItemValue.show = true;
        },
        handleAddFormItem() {
            this.$emit('add');
        },
        handleDeleteItemSelf(id) {
            this.$emit('delete', id);
        },
        deleteAllFormItem() {
            this.$emit('deleteAll');
        },
        downloadTemplate() {
            const data = [{ id: 'id' }];
            const blob = xlsxUtils.export({ Sheet1: data });
            saveAs(URL.createObjectURL(blob), 'data_template.xlsx');
        },
    },
};
</script>

<style lang="less">
.button_container {
    padding: 20px;
}
.button_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    float: right;
}
.pf-btn {
    margin: 8px;
}
.button_text {
    display: inline-block;
    margin-top: 12px;
    border: 1px solid;
    padding: 5px;
}
.button_text_order {
    margin-left: 70px;
    margin-right: 120px;
}
.pf-input {
    width: 300px;
    text-align: center;
}
.pf-form-item {
    padding: 5px;
}
.pf-input-wrapper {
    width: 26%;
}
.pf-upload-list {
    margin-top: -25px;
}
</style>

复制代码
  • 使用这个组件
 <NewList :formItem="formItem" :formItemValue="formItemValue" @delete="deleteAllFormItem" @add="addFormItem" @upload="uploadExcel"></NewList>
复制代码

5、结果展示 ?

image.png

6、更多思考 ?

  • 1、需要考虑 封装为公共组件
  • 2、需要将结构进一步简化
  • 3、将css 可以抽离出去
  • 4、可以将这个组件分成多个小组件 再组合起来
  • ......

7、什么,你还很激动 ?

欢迎去主页 快乐 追文, 更多快乐 ,敬请期待 ......

github(点个 star 你会变得更强(不会秃))

github.com/huanhunmao/…

分类:
前端
收藏成功!
已添加到「」, 点击更改