1、为啥要写本篇？
有好几个小伙伴问我如何去阅读源码？如何成为开源项目贡献者？ 短暂思考后先带你入门，回答第一部分
ps: 这篇不是告诉你如何理解每部分内容，会说个主要过程，然后写一个组件来说明这个事情
2、怎么拿到源码？
-
1、 上github 搜索 element
-
2、去官网 然后 找到入口
- 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 入口文件
- Button 组件为例
- scss 在哪里 ？
- 常量定义在哪里 ？
- test 测试 测试这种类型 就是非常 经典的 jest 测试写法 ，如果不熟悉看这个
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、结果展示 ？
6、更多思考 ？
- 1、需要考虑 封装为公共组件
- 2、需要将结构进一步简化
- 3、将css 可以抽离出去
- 4、可以将这个组件分成多个小组件 再组合起来
- ......
7、什么，你还很激动 ？
欢迎去主页 快乐 追文， 更多快乐 ，敬请期待 ......
github(点个 star 你会变得更强（不会秃）)
