组件分享-脑图版

20220712Vue组件.png

Vue组件

什么是组件

组件是一种编程抽象，其目的是复用

• 通用型组件
• 业务性组件

为什么需要组件

从业务角度看，业务成长到一定规模后，共性的地方需要复用。

从设计角度看，产品会遵循一定的设计规范，需要保证产品一致性。

从开发效率角度看，快速响应业务开发。

从维护角度看，需要统一管理代码，一处修改全局响应 而非到处复制粘贴。

组件库的价值

就个人而言，拥有一套自己的组件库，可以让开发更高效

就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范

就公司而言，拥有一套公司维护的开源组件库，公司在行业内更具影响力

组件设计原则

就近原则

• 单文件开发 vue文件 三部分在同一页面
• 相关联组件放在同级目录

高复用性

• 页面级别的复用 （基础组建）
• 项目级别的复用-私有组件库（业务组件）
• 公司级别的复用-开源组件库（ elment-ui）

灵活扩展

• 利用slot插槽完成用户个性化定制需求

封装组件分类

木偶组件

一般通过props从父组件获取数据 给什么数据就显示什么数据 给什么方法 就调用什么方法

• 内部只处理渲染工作 。固定部分 变化部分进行了很好的分离。

智能组件

最外层的父组件，拥有数据

• 数据的传递
• 回调的处理

通用型-表格封装

首先要明确表格自身具有哪些属性，此处展示一些常用的属性

• table表格的属性

  • 1 border 是否带有纵向边框
    2 empty-text 空数据时显示文本
    3 loading
    ......

• 列属性

1、hidden: 是否显示
2 、prop 对应字段名
3 、lable 列标题
4 、showTooltip: 内容过长隐藏显示省略号
5、width 对应列宽度
6、fixed 列是否固定在左侧 (true left right)
7、align
8、slot 特殊字段处理
1 某字段需要个性化处理呢
诸如“状态”字段 要求不同状态值，文字显示不同颜色，或者前缀有不同图标。
2 一行有多个字段同时需要个性化处理呢

封装代码

全局注册

image.png

使用：

定义数据源+表格列

            tableDataPay: [],
            tableColumnsPay: [
                { prop: 'invoiceRealTypeView', label: '发票类型' },
                { prop: 'invoiceNo', label: '发票号码' },
                { prop: 'buyerName', label: '购买方名称' },
                { prop: 'sellerName', label: '销售方名称' },
                { prop: 'invoiceTotalAmount', label: '价税合计金额', money: true },
                { prop: 'invoiceId', label: '销货清单', slot: true },
                { prop: 'invoiceInfoOssKey', label: '发票', slot: true },
                { prop: 'thirdInvoiceStateView', label: '发票状态' },
                { prop: 'invoiceRealTypeView', label: '开票类型' },
                { prop: 'invoiceDate', label: '开票日期', tooltip: false },
                // { prop: 'postNumber', label: '邮寄单号' }, // 需求文档：这两个前端暂时不展示
                // { prop: 'postStateView', label: '邮寄状态' },
            ],