一种前端封装自研组件库的制作方法

1.本发明涉及前端封装组件，具体涉及一种前端封装自研组件库。


背景技术：

2.目前，市场上主流的前端结构因为需要兼顾各种开发场景，往往可定制化程度较高，但是封装程度较低，使用时需要编写大量代码，无法实现快速开发。
3.市场上主流的前端结构具有以下缺点：
4.1)全局风格多样，无法做到全局风格的有效统一；
5.2)开发成本较高，同时开发效率较低；
6.3)在大数据量的场景中，浏览器容易因渲染dom过多而出现卡顿性能问题，导致用户通过前端网页进行数据访问的体验感较差。


技术实现要素：

7.(一)解决的技术问题
8.针对现有技术所存在的上述缺点，本发明提供了一种前端封装自研组件库，能够有效克服现有技术所存在的无法实现全局风格的有效统一、开发效率较低、在大数据量的场景中用户进行数据访问体验感较差的缺陷。
9.(二)技术方案
10.为实现以上目的，本发明通过以下技术方案予以实现：
11.一种前端封装自研组件库，包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元，所述页面布局组件单元包括：
12.布局组件，此组件为一个布局容器，flex布局两端对齐的形式；
13.信息描述组件，此组件为一个布局容器，描述详细页展示字段时使用；
14.图钉组件，将页面元素固定在可视区域；
15.间隔组件，自动分割，用于区分内容；
16.返回顶部组件，滚动回到页面顶部；
17.趋势组件，指数上下趋势；
18.图表组件，基于javascript的开源可视化图表库；
19.相对时间组件，用于表示一段时间前相对于当前的时间描述；
20.所述内容编辑组件单元包括：
21.上传图片组件，用于上传图片；
22.上传文件组件，用于上传文件；
23.下拉树选择器，下拉选择为树形结构；
24.富文本编辑器，基于wangeditor二次封装的富文本编辑器，内置默认url和token填充，支持v-model方式调用；
25.虚拟化树形控件，在数据量过大时使用，虚拟树支持大量数据处理；
26.虚拟列表选择器，在下拉列表数据量过大时使用，解决浏览器渲染dom过多造成卡顿性能问题；
27.所述交互扩展组件单元包括：
28.下载组件，用于下载文件；
29.文本复制组件，复制文本到剪贴板；
30.列表工具组件，包括控制字段显示/隐藏，导出列表数据，打印列表数据功能；
31.分页组件，此组件为element-ui分页器再封装；
32.倒计时组件，用于根据设置目标时间进行倒计时，并通过服务器时间校正当前系统时间；
33.选项卡选择器，用于在选项过多时使用选项卡展示并选择内容。
34.优选地，所述间隔组件自定义间隔类型，所述趋势组件自定义图标字符。
35.优选地，所述页面布局组件单元还包括：
36.文本省略组件，为文本自动添加省略号；
37.弹窗组件，支持弹窗/抽屉效果，支持v-model方式控制组件的显示/隐藏；
38.评论组件，用于对网站内容进行反馈、评价和讨论；
39.图片放大器组件，此组件为一个图片放大器，用于鼠标移动至商品详情页放大商品图片；
40.金额展示组件，用于进行金额展示；
41.步骤条组件，用于步骤条显示；
42.滚动条组件，用于替换浏览器的原生滚动条。
43.优选地，所述金额展示组件对金额进行千分位展示，并在鼠标悬停时展示金额大写的hover，单击金额展示组件会复制内容。
44.优选地，所述上传图片组件为element-ui上传图片组件，上传内容通过缩略图展示，支持点击图片进行效果预览。
45.优选地，所述上传文件组件为element-ui上传文件组件，上传内容通过text列表展示，支持拖拽上传，在不需要图片缩略图效果的情况下同样可以上传图片。
46.优选地，所述内容编辑组件单元还包括：
47.列表选择弹窗组件，支持v-model方式控制组件的显示/隐藏，支持多选/单选模式，支持自定义筛选条件，支持分页记忆选中状态，支持默认选中数据，支持设置不可选中数据；
48.导入弹框组件，用于导入表格数据。
49.优选地，所述下载组件在提供文件对象时，使用a标签href属性下载。
50.优选地，所述交互扩展组件单元还包括：
51.高级搜索组件，自定义高级搜索方案。
52.(三)有益效果
53.与现有技术相比，本发明所提供的一种前端封装自研组件库，具有以下有益效果：
54.1)通过对组件的二次封装/自研标准组件，实现全局风格的有效统一；
55.2)大大降低了开发成本，同时能够有效提高企业前端开发员工的工作效率；
56.3)解决开发的痛点问题，在大数据量的场景中保证数据流畅处理，提升用户进行
数据访问的体验感；
57.4)具有较好的拓展性，能够根据自身实际业务需求进行二次开发。
附图说明
58.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
59.图1为本发明中使用前端封装自研组件库后得到的第一效果图；
60.图2为本发明中使用前端封装自研组件库后得到的第二效果图；
61.图3为本发明中使用前端封装自研组件库后得到的第三效果图；
62.图4为本发明中使用前端封装自研组件库后得到的第四效果图；
63.图5为本发明中使用前端封装自研组件库后得到的第五效果图；
64.图6为本发明中使用前端封装自研组件库后得到的第六效果图。
具体实施方式
65.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
66.一种前端封装自研组件库，包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元。
67.其中，页面布局组件单元包括：
68.a、必要组件
69.1)thfilter布局组件，此组件为一个布局容器，flex布局两端对齐的形式；
70.2)thdesc信息描述组件，此组件为一个布局容器，描述详细页展示字段时使用；
71.3)thaffix图钉组件，将页面元素固定在可视区域；
72.4)thspace间隔组件，自动分割，用于区分内容，能够自定义间隔类型；
73.5)thbacktop返回顶部组件，滚动回到页面顶部；
74.6)thtrend趋势组件，指数上下趋势，能够自定义图标字符等；
75.7)thcharts图表组件，基于javascript的开源可视化图表库(echarts)；
76.8)thtime相对时间组件，用于表示一段时间前相对于当前的时间描述；
77.b、功能扩展组件
78.9)thellipsis文本省略组件，为文本自动添加省略号；
79.10)thdialog弹窗组件，支持弹窗/抽屉效果，支持v-model方式控制组件的显示/隐藏；
80.11)thcomment评论组件，用于对网站内容进行反馈、评价和讨论；
81.12)thzoom图片放大器组件，此组件为一个图片放大器，用于鼠标移动至商品详情页放大商品图片；
82.13)thmoneylabel金额展示组件，用于进行金额展示，对金额进行千分位展示，并在鼠标悬停时展示金额大写的hover，单击金额展示组件会复制内容；
83.14)thsteps步骤条组件，用于步骤条显示；
84.15)thscrollbar滚动条组件，用于替换浏览器的原生滚动条。
85.其中，内容编辑组件单元包括：
86.a、必要组件
87.1)thuploadimg上传图片组件，用于上传图片，为element-ui上传图片组件，上传内容通过缩略图展示，支持点击图片进行效果预览；
88.2)thuploadfile上传文件组件，用于上传文件，为element-ui上传文件组件，上传内容通过text列表展示，支持拖拽上传，在不需要图片缩略图效果的情况下同样可以上传图片；
89.3)thtreeselect下拉树选择器，下拉选择为树形结构；
90.4)theditor富文本编辑器，基于wangeditor二次封装的富文本编辑器，内置默认url和token填充，支持v-model方式调用；
91.5)thtreev2虚拟化树形控件，在数据量过大时使用，虚拟树支持大量数据(支持万行数据)处理；
92.6)thselectv2虚拟列表选择器，在下拉列表数据量过大时使用，解决浏览器渲染dom过多造成卡顿性能问题(支持万行数据)；
93.b、功能扩展组件
94.7)thselectpage列表选择弹窗组件，支持v-model方式控制组件的显示/隐藏，支持多选/单选模式，支持自定义筛选条件，支持分页记忆选中状态，支持默认选中数据，支持设置不可选中数据；
95.8)thimportpage导入弹框组件，用于导入表格数据。
96.其中，交互扩展组件单元包括：
97.a、必要组件
98.1)thdownload下载组件，用于下载文件，在提供文件对象时，使用a标签href属性下载；
99.2)thcopy文本复制组件，复制文本到剪贴板；
100.3)thcolumnselect列表工具组件，包括控制字段显示/隐藏(支持本地缓存)，导出列表数据，打印列表数据等功能；
101.4)thpagination分页组件，此组件为element-ui分页器再封装；
102.5)thcountdown倒计时组件，用于根据设置目标时间进行倒计时，并通过服务器时间校正当前系统时间；
103.6)thselecttab选项卡选择器，用于在选项过多时使用选项卡展示并选择内容；
104.b、功能扩展组件
105.7)thsearch高级搜索组件，自定义高级搜索方案。
106.本技术技术方案中，每个组件都有配套的开发文档，安装方式：
107.npm install ith-ui-view//安装
108.npmupdate ith-ui-view//更新
109.引入方式(main.js)：
110.import'ith-ui-view/dist/ith-ui-view.css'
111.importithui from'ith-ui-view'
112.//设置baseurl，可选项
113.ithui.config.setbaseurl(process.env.vue_app_api_base_home)
114.vue.use(ithui)
115.以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不会使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。