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

git clone git@github.com:ElemeFE/element.git
复制代码

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

<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>
复制代码