CN115079902A - 一种前端封装自研组件库 - Google Patents

一种前端封装自研组件库 Download PDF

Info

Publication number
CN115079902A
CN115079902A CN202210648739.8A CN202210648739A CN115079902A CN 115079902 A CN115079902 A CN 115079902A CN 202210648739 A CN202210648739 A CN 202210648739A CN 115079902 A CN115079902 A CN 115079902A
Authority
CN
China
Prior art keywords
component
uploading
self
assembly
library
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210648739.8A
Other languages
English (en)
Inventor
石军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Anhui Tonghui Information Technology Co ltd
Original Assignee
Anhui Tonghui Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Anhui Tonghui Information Technology Co ltd filed Critical Anhui Tonghui Information Technology Co ltd
Priority to CN202210648739.8A priority Critical patent/CN115079902A/zh
Publication of CN115079902A publication Critical patent/CN115079902A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及前端封装组件，具体涉及一种前端封装自研组件库，包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元，通过对组件的二次封装/自研标准组件，实现全局风格的有效统一；大大降低了开发成本，同时能够有效提高企业前端开发员工的工作效率；解决开发的痛点问题，在大数据量的场景中保证数据流畅处理，提升用户进行数据访问的体验感；具有较好的拓展性，能够根据自身实际业务需求进行二次开发；本发明提供的技术方案能够有效克服现有技术所存在的无法实现全局风格的有效统一、开发效率较低、在大数据量的场景中用户进行数据访问体验感较差的缺陷。

Description

一种前端封装自研组件库
技术领域
本发明涉及前端封装组件，具体涉及一种前端封装自研组件库。
背景技术
目前，市场上主流的前端结构因为需要兼顾各种开发场景，往往可定制化程度较高，但是封装程度较低，使用时需要编写大量代码，无法实现快速开发。
市场上主流的前端结构具有以下缺点：
1)全局风格多样，无法做到全局风格的有效统一；
2)开发成本较高，同时开发效率较低；
3)在大数据量的场景中，浏览器容易因渲染dom过多而出现卡顿性能问题，导致用户通过前端网页进行数据访问的体验感较差。
发明内容
(一)解决的技术问题
针对现有技术所存在的上述缺点，本发明提供了一种前端封装自研组件库，能够有效克服现有技术所存在的无法实现全局风格的有效统一、开发效率较低、在大数据量的场景中用户进行数据访问体验感较差的缺陷。
(二)技术方案
为实现以上目的，本发明通过以下技术方案予以实现：
一种前端封装自研组件库，包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元，所述页面布局组件单元包括：
布局组件，此组件为一个布局容器，flex布局两端对齐的形式；
信息描述组件，此组件为一个布局容器，描述详细页展示字段时使用；
图钉组件，将页面元素固定在可视区域；
间隔组件，自动分割，用于区分内容；
返回顶部组件，滚动回到页面顶部；
趋势组件，指数上下趋势；
图表组件，基于JavaScript的开源可视化图表库；
相对时间组件，用于表示一段时间前相对于当前的时间描述；
所述内容编辑组件单元包括：
上传图片组件，用于上传图片；
上传文件组件，用于上传文件；
下拉树选择器，下拉选择为树形结构；
富文本编辑器，基于wangeditor二次封装的富文本编辑器，内置默认url和token填充，支持v-model方式调用；
虚拟化树形控件，在数据量过大时使用，虚拟树支持大量数据处理；
虚拟列表选择器，在下拉列表数据量过大时使用，解决浏览器渲染dom过多造成卡顿性能问题；
所述交互扩展组件单元包括：
下载组件，用于下载文件；
文本复制组件，复制文本到剪贴板；
列表工具组件，包括控制字段显示/隐藏，导出列表数据，打印列表数据功能；
分页组件，此组件为element-ui分页器再封装；
倒计时组件，用于根据设置目标时间进行倒计时，并通过服务器时间校正当前系统时间；
选项卡选择器，用于在选项过多时使用选项卡展示并选择内容。
优选地，所述间隔组件自定义间隔类型，所述趋势组件自定义图标字符。
优选地，所述页面布局组件单元还包括：
文本省略组件，为文本自动添加省略号；
弹窗组件，支持弹窗/抽屉效果，支持v-model方式控制组件的显示/隐藏；
评论组件，用于对网站内容进行反馈、评价和讨论；
图片放大器组件，此组件为一个图片放大器，用于鼠标移动至商品详情页放大商品图片；
金额展示组件，用于进行金额展示；
步骤条组件，用于步骤条显示；
滚动条组件，用于替换浏览器的原生滚动条。
优选地，所述金额展示组件对金额进行千分位展示，并在鼠标悬停时展示金额大写的hover，单击金额展示组件会复制内容。
优选地，所述上传图片组件为element-ui上传图片组件，上传内容通过缩略图展示，支持点击图片进行效果预览。
优选地，所述上传文件组件为element-ui上传文件组件，上传内容通过text列表展示，支持拖拽上传，在不需要图片缩略图效果的情况下同样可以上传图片。
优选地，所述内容编辑组件单元还包括：
列表选择弹窗组件，支持v-model方式控制组件的显示/隐藏，支持多选/单选模式，支持自定义筛选条件，支持分页记忆选中状态，支持默认选中数据，支持设置不可选中数据；
导入弹框组件，用于导入表格数据。
优选地，所述下载组件在提供文件对象时，使用a标签href属性下载。
优选地，所述交互扩展组件单元还包括：
高级搜索组件，自定义高级搜索方案。
(三)有益效果
与现有技术相比，本发明所提供的一种前端封装自研组件库，具有以下有益效果：
1)通过对组件的二次封装/自研标准组件，实现全局风格的有效统一；
2)大大降低了开发成本，同时能够有效提高企业前端开发员工的工作效率；
3)解决开发的痛点问题，在大数据量的场景中保证数据流畅处理，提升用户进行数据访问的体验感；
4)具有较好的拓展性，能够根据自身实际业务需求进行二次开发。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明中使用前端封装自研组件库后得到的第一效果图；
图2为本发明中使用前端封装自研组件库后得到的第二效果图；
图3为本发明中使用前端封装自研组件库后得到的第三效果图；
图4为本发明中使用前端封装自研组件库后得到的第四效果图；
图5为本发明中使用前端封装自研组件库后得到的第五效果图；
图6为本发明中使用前端封装自研组件库后得到的第六效果图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
一种前端封装自研组件库，包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元。
其中，页面布局组件单元包括：
A、必要组件
1)ThFilter布局组件，此组件为一个布局容器，flex布局两端对齐的形式；
2)ThDesc信息描述组件，此组件为一个布局容器，描述详细页展示字段时使用；
3)ThAffix图钉组件，将页面元素固定在可视区域；
4)ThSpace间隔组件，自动分割，用于区分内容，能够自定义间隔类型；
5)ThBackTop返回顶部组件，滚动回到页面顶部；
6)ThTrend趋势组件，指数上下趋势，能够自定义图标字符等；
7)ThCharts图表组件，基于JavaScript的开源可视化图表库(Echarts)；
8)ThTime相对时间组件，用于表示一段时间前相对于当前的时间描述；
B、功能扩展组件
9)ThEllipsis文本省略组件，为文本自动添加省略号；
10)ThDialog弹窗组件，支持弹窗/抽屉效果，支持v-model方式控制组件的显示/隐藏；
11)ThComment评论组件，用于对网站内容进行反馈、评价和讨论；
12)ThZoom图片放大器组件，此组件为一个图片放大器，用于鼠标移动至商品详情页放大商品图片；
13)ThMoneyLabel金额展示组件，用于进行金额展示，对金额进行千分位展示，并在鼠标悬停时展示金额大写的hover，单击金额展示组件会复制内容；
14)ThSteps步骤条组件，用于步骤条显示；
15)ThScrollbar滚动条组件，用于替换浏览器的原生滚动条。
其中，内容编辑组件单元包括：
A、必要组件
1)ThUploadImg上传图片组件，用于上传图片，为element-ui上传图片组件，上传内容通过缩略图展示，支持点击图片进行效果预览；
2)ThUploadFile上传文件组件，用于上传文件，为element-ui上传文件组件，上传内容通过text列表展示，支持拖拽上传，在不需要图片缩略图效果的情况下同样可以上传图片；
3)ThTreeSelect下拉树选择器，下拉选择为树形结构；
4)ThEditor富文本编辑器，基于wangeditor二次封装的富文本编辑器，内置默认url和token填充，支持v-model方式调用；
5)ThTreeV2虚拟化树形控件，在数据量过大时使用，虚拟树支持大量数据(支持万行数据)处理；
6)ThSelectV2虚拟列表选择器，在下拉列表数据量过大时使用，解决浏览器渲染dom过多造成卡顿性能问题(支持万行数据)；
B、功能扩展组件
7)ThSelectPage列表选择弹窗组件，支持v-model方式控制组件的显示/隐藏，支持多选/单选模式，支持自定义筛选条件，支持分页记忆选中状态，支持默认选中数据，支持设置不可选中数据；
8)ThImportPage导入弹框组件，用于导入表格数据。
其中，交互扩展组件单元包括：
A、必要组件
1)ThDownLoad下载组件，用于下载文件，在提供文件对象时，使用a标签href属性下载；
2)ThCopy文本复制组件，复制文本到剪贴板；
3)ThColumnSelect列表工具组件，包括控制字段显示/隐藏(支持本地缓存)，导出列表数据，打印列表数据等功能；
4)ThPagination分页组件，此组件为element-ui分页器再封装；
5)ThCountdown倒计时组件，用于根据设置目标时间进行倒计时，并通过服务器时间校正当前系统时间；
6)ThSelectTab选项卡选择器，用于在选项过多时使用选项卡展示并选择内容；
B、功能扩展组件
7)ThSearch高级搜索组件，自定义高级搜索方案。
本申请技术方案中，每个组件都有配套的开发文档，安装方式：
npm install ith-ui-view//安装
npmupdate ith-ui-view//更新
引入方式(main.js)：
import'ith-ui-view/dist/ith-ui-view.css'
importIthUI from'ith-ui-view'
//设置baseUrl，可选项
IthUI.config.setBaseUrl(process.env.VUE_APP_API_BASE_HOME)
Vue.use(IthUI)
以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不会使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.一种前端封装自研组件库，其特征在于：包括页面布局组件单元、内容编辑组件单元和交互扩展组件单元，所述页面布局组件单元包括：
布局组件，此组件为一个布局容器，flex布局两端对齐的形式；
信息描述组件，此组件为一个布局容器，描述详细页展示字段时使用；
图钉组件，将页面元素固定在可视区域；
间隔组件，自动分割，用于区分内容；
返回顶部组件，滚动回到页面顶部；
趋势组件，指数上下趋势；
图表组件，基于JavaScript的开源可视化图表库；
相对时间组件，用于表示一段时间前相对于当前的时间描述；
所述内容编辑组件单元包括：
上传图片组件，用于上传图片；
上传文件组件，用于上传文件；
下拉树选择器，下拉选择为树形结构；
富文本编辑器，基于wangeditor二次封装的富文本编辑器，内置默认url和token填充，支持v-model方式调用；
虚拟化树形控件，在数据量过大时使用，虚拟树支持大量数据处理；
虚拟列表选择器，在下拉列表数据量过大时使用，解决浏览器渲染dom过多造成卡顿性能问题；
所述交互扩展组件单元包括：
下载组件，用于下载文件；
文本复制组件，复制文本到剪贴板；
列表工具组件，包括控制字段显示/隐藏，导出列表数据，打印列表数据功能；
分页组件，此组件为element-ui分页器再封装；
倒计时组件，用于根据设置目标时间进行倒计时，并通过服务器时间校正当前系统时间；
选项卡选择器，用于在选项过多时使用选项卡展示并选择内容。
2.根据权利要求1所述的前端封装自研组件库，其特征在于：所述间隔组件自定义间隔类型，所述趋势组件自定义图标字符。
3.根据权利要求1所述的前端封装自研组件库，其特征在于：所述页面布局组件单元还包括：
文本省略组件，为文本自动添加省略号；
弹窗组件，支持弹窗/抽屉效果，支持v-model方式控制组件的显示/隐藏；
评论组件，用于对网站内容进行反馈、评价和讨论；
图片放大器组件，此组件为一个图片放大器，用于鼠标移动至商品详情页放大商品图片；
金额展示组件，用于进行金额展示；
步骤条组件，用于步骤条显示；
滚动条组件，用于替换浏览器的原生滚动条。
4.根据权利要求3所述的前端封装自研组件库，其特征在于：所述金额展示组件对金额进行千分位展示，并在鼠标悬停时展示金额大写的hover，单击金额展示组件会复制内容。
5.根据权利要求1所述的前端封装自研组件库，其特征在于：所述上传图片组件为element-ui上传图片组件，上传内容通过缩略图展示，支持点击图片进行效果预览。
6.根据权利要求1所述的前端封装自研组件库，其特征在于：所述上传文件组件为element-ui上传文件组件，上传内容通过text列表展示，支持拖拽上传，在不需要图片缩略图效果的情况下同样可以上传图片。
7.根据权利要求1所述的前端封装自研组件库，其特征在于：所述内容编辑组件单元还包括：
列表选择弹窗组件，支持v-model方式控制组件的显示/隐藏，支持多选/单选模式，支持自定义筛选条件，支持分页记忆选中状态，支持默认选中数据，支持设置不可选中数据；
导入弹框组件，用于导入表格数据。
8.根据权利要求1所述的前端封装自研组件库，其特征在于：所述下载组件在提供文件对象时，使用a标签href属性下载。
9.根据权利要求1所述的前端封装自研组件库，其特征在于：所述交互扩展组件单元还包括：
高级搜索组件，自定义高级搜索方案。
CN202210648739.8A 2022-06-09 2022-06-09 一种前端封装自研组件库 Pending CN115079902A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210648739.8A CN115079902A (zh) 2022-06-09 2022-06-09 一种前端封装自研组件库

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210648739.8A CN115079902A (zh) 2022-06-09 2022-06-09 一种前端封装自研组件库

Publications (1)

Publication Number Publication Date
CN115079902A true CN115079902A (zh) 2022-09-20

Family

ID=83250637

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210648739.8A Pending CN115079902A (zh) 2022-06-09 2022-06-09 一种前端封装自研组件库

Country Status (1)

Country Link
CN (1) CN115079902A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040031058A1 (en) * 2002-05-10 2004-02-12 Richard Reisman Method and apparatus for browsing using alternative linkbases
CN106293777A (zh) * 2016-10-31 2017-01-04 山东鲁能软件技术有限公司 一种基于组件式开发前端界面控件实现方法
CN107832038A (zh) * 2017-10-27 2018-03-23 中航信移动科技有限公司 组件库的实现方法及装置
CN113094042A (zh) * 2021-04-29 2021-07-09 国电南瑞科技股份有限公司 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法
CN114281323A (zh) * 2021-03-30 2022-04-05 北京百特运通科技有限公司 一种前端表单生成方法及系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040031058A1 (en) * 2002-05-10 2004-02-12 Richard Reisman Method and apparatus for browsing using alternative linkbases
CN106293777A (zh) * 2016-10-31 2017-01-04 山东鲁能软件技术有限公司 一种基于组件式开发前端界面控件实现方法
CN107832038A (zh) * 2017-10-27 2018-03-23 中航信移动科技有限公司 组件库的实现方法及装置
CN114281323A (zh) * 2021-03-30 2022-04-05 北京百特运通科技有限公司 一种前端表单生成方法及系统
CN113094042A (zh) * 2021-04-29 2021-07-09 国电南瑞科技股份有限公司 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法

Similar Documents

Publication Publication Date Title
CN107908399B (zh) 一种页面开发方法及装置
US10984177B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
CN104933142B (zh) 动画展示方法和装置
AU2016276284B9 (en) System and method for the generation of an adaptive user interface in a website building system
CN105094804B (zh) 在页面中添加动画的方法和装置
US20080307301A1 (en) Web Clip Using Anchoring
US20120297324A1 (en) Navigation Control Availability
US20070106952A1 (en) Presenting and managing clipped content
Reid jQuery Mobile
CA2817554A1 (en) Mobile content management system
US20130198636A1 (en) Dynamic Content Presentations
CN110647272A (zh) 一种显示控制方法及装置
CN106155654B (zh) 屏蔽网页操作的方法、装置及电子设备
EP3805909A1 (en) Display control device, display control method, and display control program
CN110968314A (zh) 一种页面生成方法及装置
WO2013138242A1 (en) Dynamic content presentations
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
CN114730341A (zh) 保护在本地应用的用户界面数据收集中的用户隐私
CN115079902A (zh) 一种前端封装自研组件库
CN115601567A (zh) 页面颜色拾取方法、装置、计算机设备、存储介质及产品
CN110908550B (zh) 光标悬停状态下的操作处理方法和装置
US20140337350A1 (en) Matrix viewing
Aryal Bootstrap: a front-end framework for responsive web design
CN117520691B (zh) 一种条目化数据显示方法、装置、存储介质及电子设备
Doan Practical Responsive Web Design

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination