[go: up one dir, main page]

CN114217877A - 基于页面交互组件的操作处理方法、装置、设备及介质 - Google Patents

基于页面交互组件的操作处理方法、装置、设备及介质 Download PDF

Info

Publication number
CN114217877A
CN114217877A CN202111550466.5A CN202111550466A CN114217877A CN 114217877 A CN114217877 A CN 114217877A CN 202111550466 A CN202111550466 A CN 202111550466A CN 114217877 A CN114217877 A CN 114217877A
Authority
CN
China
Prior art keywords
component
page
page interaction
interaction component
event
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.)
Granted
Application number
CN202111550466.5A
Other languages
English (en)
Other versions
CN114217877B (zh
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.)
Fifth Paradigm Shenzhen Technology Co ltd
Shanghai Shanshu Network Technology Co ltd
Shanshu Science And Technology Beijing Co ltd
Shanshu Science And Technology Suzhou Co ltd
Original Assignee
Shanghai Shanshu Network Technology Co ltd
Shanshu Science And Technology Suzhou Co ltd
Shanshu Science And Technology Beijing Co ltd
Shenzhen Shanzhi 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 Shanghai Shanshu Network Technology Co ltd, Shanshu Science And Technology Suzhou Co ltd, Shanshu Science And Technology Beijing Co ltd, Shenzhen Shanzhi Technology Co Ltd filed Critical Shanghai Shanshu Network Technology Co ltd
Priority to CN202111550466.5A priority Critical patent/CN114217877B/zh
Publication of CN114217877A publication Critical patent/CN114217877A/zh
Application granted granted Critical
Publication of CN114217877B publication Critical patent/CN114217877B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种基于页面交互组件的操作处理方法、装置、设备及介质，其中所述方法包括：接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。采用本发明，能解决现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。

Description

基于页面交互组件的操作处理方法、装置、设备及介质
技术领域
本发明涉及软件开发技术领域，尤其涉及一种基于页面交互组件的操作处理方法、装置、设备及介质。
背景技术
在软件开发领域中针对元素用户界面(Element UI)中的选择(select)组件，目前定义了select组件公用的属性和方法，生成动态的选项(option)；根据用户键入事件，通过触发交换(change)事件在父子组件中采用注入的方式来进行父子组件间的数据相互通信。
然而在实践中发现，现有Element UI中的select组件下拉框中涉及的数据量较大时，例如数据量达到千万级别时，会造成页面渲染卡顿、下拉滑动不流畅及内存溢出等问题。
发明内容
本申请实施例通过提供一种基于页面交互组件的操作处理方法、装置、设备及介质，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。
一方面，本申请通过本申请的一实施例提供一种基于页面交互组件的操作处理方法，所述方法包括：
接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述方法还包括：
将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。
可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：
响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。
可选地，所述方法还包括：
输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
可选地，所述方法还包括：
接收所述页面交互组件的输入数据；
在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。
可选地，所述接收组件操作事件之前，所述方法还包括：
定义所述页面交互组件所支持的功能操作；
采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；
为所述页面交互组件，编写及定义对应的操作处理逻辑；
对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；
将所述目标数据集成于所述页面交互组件中；
其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。
可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：
定义所述页面交互组件支持筛选的输入框；
定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；
定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；
定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；
定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；
定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。
另一方面，本申请通过本申请的一实施例提供一种基于页面交互组件的操作处理装置，所述装置包括：接收模块和处理模块，其中：
所述接收模块，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
所述处理模块，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
关于本申请实施例中未介绍或未描述的内容可对应参考前述方法实施例中的相关介绍，这里不再赘述。
另一方面，本申请通过本申请的一实施例提供一种终端设备，所述终端设备包括：处理器、存储器、通信接口和总线；所述处理器、所述存储器和所述通信接口通过所述总线连接并完成相互间的通信；所述存储器存储可执行程序代码；所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于执行如上所述的基于页面交互组件的操作处理方法。
另一方面，本申请通过本申请的一实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有程序，当所述程序运行在终端设备时执行如上所述的基于页面交互组件的操作处理方法。
本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：本申请接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本申请采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。
图2是本申请实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。
图3是本申请实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。
图4是本申请实施例提供的一种终端设备的结构示意图。
具体实施方式
本申请实施例通过提供一种基于页面交互组件的操作处理方法，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。
本申请实施例的技术方案为解决上述技术问题，总体思路如下：接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。
首先说明，本文中出现的术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
首先，介绍本申请涉及的一些技术术语。
下拉框：select元素是一种表单控件，<select>标签用来创建一个下拉列表，<option>标签表示下拉列表中的每一项(条目)。默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项，可以创建单选或多选菜单。
交互组件：定义是接收用户输入(例如键盘或鼠标活动)可对数据和方法进行封装，从而实现某些新的功能的组件。组件有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。
Vue：是一套用于构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的接口(API)实现响应的数据绑定和组合的视图组件。
Element UI:Element UI是一套采用Vue 2.0作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助网站迅速成型。
申请人在提出本申请的过程中还发现：目前，针对Element UI中的选择select组件，其定义了公共的属性和方法，生成动态的option选项；根据用户输入事件，通过触发change交换事件在父子组件中，采用注入的方式来进行组件间的数据相互通信；处理公共的诸如选中事件、查询改变事件等共有方法；然后将返回的数据更新到界面中。
在实践中发现，现有Element UI中的select下拉框，未对大数据量进行处理，在数据量达到千万级别时，造成页面渲染卡顿、下拉滑动不流畅、内存溢出等问题。数据显示过长时，没有悬停显示更多的友好提示。
为解决上述问题，本申请提供一种基于页面交互组件的操作处理方法、装置、终端设备及介质。请参见图1，是本申请实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。如图1所示的方法应用于Vue框架中，所述方法包括如下步骤：
S101、接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理。
本申请所述组件操作事件为在检测到用户针对页面交互组件进行例如单击、双击、选项选择等操作所产生的操作事件。所述组件操作事件包括但不限于用户键入事件及用户交互事件等。所述用户键入事件具体可包括用户键盘事件，所述用户交互事件具体可包括下拉框的筛选操作事件、单选操作事件、复选操作事件及全选操作事件。
所述页面交互组件为系统自定义配置的交互组件，其可例如为上述的选择Select组件等。所述页面交互组件为预先采用基于虚拟框架的下拉框(vxe-pulldown)和虚拟树(vxe-virtual-tree)相结合的方式渲染到对应的目标页面中的，且所述页面交互组件支持数据转换处理。
S102、响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
本申请在接收所述组件操作事件后，可响应处理所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
通过实施本申请，本申请通过接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本申请采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。
请参见图2，是本申请实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。如图2所示的方法包括如下实施步骤：
S201、定义页面交互组件所支持的功能操作；其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。
本申请可先定义页面交互组件的基本功能，例如下拉框筛选、全选及半选等功能。进一步，本申请可定义所述页面交互组件所支持公共的全选事件方法selectAllHandler和半选事件方法checkedEvent。
S202、采用组件封装模式，并运用基于所述虚拟框架的下拉框(vxe-pulldown)和所述虚拟树(vxe-virtual-tree)相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中。
在一具体实施例中，本申请可定义初始渲染的内部模板(template)中的渲染内容，这里引用了vxe-pulldown下拉框作为外层的盒子元素，在内部引入表格组件(vxe-table)中的虚拟树(vxe-virtual-tree)作为主要的渲染体进行页面布局。这样即可解决下拉框中存在较多数据量时，出现渲染卡顿、下拉框卡顿、滑动不流畅等问题。
进一步本申请可定义可供筛选的输入(input)框元素和可供关闭选择项的tag标签。
S203、为所述页面交互组件，编写及定义对应的操作处理逻辑。
本申请可为所述目标页面中的页面交互组件，编写该页面交互组件的交互逻辑。具体实现如下：
本申请可先定义初始的输入值value，为输入input框设置对应的默认值。进一步本申请可定义初始的初始化init方法，为虚拟数(vxe-virtual-tree)中的数据(data)设置初始值(即渲染数据)，进而进行DOM渲染。接着，本申请定义公用的筛选方法checkedRecords，以统一筛选后的数据逻辑处理，例如下午所述的空值或空数据的统一处理等。本申请还可定义公用的用户键盘事件keyupEvent，以获取最新的渲染数据。本申请还可定义公用的复选框切换事件selectHandler，以用来更新复选框选择事件。本申请还可定义公用的关闭tag标签事件closeTagHandler，以用来更新所述页面交互组件涉及相关的最新数据。
S204、对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据，并将所述目标数据集成于所述页面交互组件中。
本申请可将由页面交互组件传入的输入数据在内部统一处理后再集成到组件内。具体实现时，本申请可在工具库内定义数据转换方法transferData，接着获取或接收由页面交互组件传入的输入数据(例如字符串数组、数组对象等)，对传入页面交互组件的输入数据进行处理，具体可通过transferData将输入数据转换为页面交互组件所需要的数据结构等，从而获得对应的目标数据。最后将目标数据再集成于所述页面交互组件中，从而实现组件内部的数据处理。
S205、在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。
本申请可对页面交互组件公用的默认数据、空数据及空值数据的处理，例如本申请可对数据类型、是否为空值数据的处理。例如，本申请可对传入所述页面交互组件的输入数据，若该输入数据中包括空值数据，则可将该空值数据统一转换为字符串空的公共统一处理等。
S206、接收并响应组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
本申请可处理组件的用户键入事件和用户交互事件。例如，本申请可对用户的输入查询筛选事件及文本框失去焦点事件的处理。本申请还可对单选操作、复选操作及全选(包括是否为筛选后的全量数据)的交互处理等。
在一具体实施例中，当所述组件操作事件包括用户的输入查询筛选事件，则本申请响应该查询筛选事件，根据用户输入的模糊查询条件进行相应数据或选项的筛选及显示处理等。
在又一具体实施例中，当所述组件操作事件包括文本框失去焦点事件，则本申请可响应该文本框失去焦点事件，用户在模糊查询后，如检测到针对页面中空白区域的目标操作(例如单击、双击、预设线条滑动等)时，可清空用户之前输入的模糊查询条件，将所述页面交互组件还原为最初的默认状态，即预设的初始状态。
在又一具体实施例中，当所述组件操作事件包括用户交互事件，例如下拉框的筛选操作、单选操作、复选操作及全选操作等操作事件时，本申请在响应所述用户交互事件进行对应的交互处理时，可将所述用户交互事件所选择的选项数据进行显示和提示处理，例如用标签tips的方式显示出来等，这样能实现数据的悬停显示，增强了用模糊的友好操作体验。
S207、输出所述页面交互组件相关的属性参数。其中，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
本申请可导出用户所需的数据参数，例如其可包括但不限于以下中的任一项或多项的组合：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
从上可以看出，本申请实施例提供的页面交互组件的封装实现了万级别的数据量加载流畅，十万级别的数据量不卡顿，采用虚拟的形式来提高页面渲染性能，提高了用户的交互体验。在项目开发过程中导出用户所需的参数和方法，实现组件的高复用，降低了项目开发阶段的开发难度和复杂度，以便关注业务逻辑层的处理，让团队开发更有效率。采用虚拟加载的形式来提高页面渲染性能，提高了用户的交互体验。数据悬停显示和无顿感的组件切换，增强了用户的友好操作体验。
基于同一发明构思，本申请另一实施例提供一种实施本申请实施例中所述基于页面交互组件的操作处理方法对应的装置和终端设备。
请参见图3，是本申请实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。如图3所示的装置30包括：接收模块301和处理模块302，其中：
所述接收模块301，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
所述处理模块302，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理模块302还用于：
将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。
可选地，所述组件操作事件包括文本框失去焦点事件，所述处理模块302具体用于：
响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。
可选地，所述处理模块302还用于：
输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
可选地，所述处理模块302还用于：
接收所述页面交互组件的输入数据；
在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。
可选地，所述接收组件操作事件之前，所述处理模块302还用于：
定义所述页面交互组件所支持的功能操作；
采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；
为所述页面交互组件，编写及定义对应的操作处理逻辑；
对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；
将所述目标数据集成于所述页面交互组件中；
其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。
可选地，所述处理模块302具体用于：
定义所述页面交互组件支持筛选的输入框；
定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；
定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；
定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；
定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；
定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。
通过实施本申请，本申请接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本申请采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。
请一并参见4，是本申请实施例提供的一种终端设备的结构示意图。如图4所示的终端设备40包括：至少一个处理器401、通信接口402、用户接口403和存储器404，处理器401、通信接口402、用户接口403和存储器404可通过总线或者其它方式连接，本发明实施例以通过总线405连接为例。其中，
处理器401可以是通用处理器，例如中央处理器(Central Processing Unit，CPU)。
通信接口402可以为有线接口(例如以太网接口)或无线接口(例如蜂窝网络接口或使用无线局域网接口)，用于与其他终端或网站进行通信。本发明实施例中，通信接口402具体用于接收操作事件等。
用户接口403具体可为触控面板，包括触摸屏和触控屏，用于检测触控面板上的操作指令，用户接口403也可以是物理按键或者鼠标。用户接口403还可以为显示屏，用于输出、显示图像或数据。
存储器404可以包括易失性存储器(Volatile Memory)，例如随机存取存储器(Random Access Memory，RAM)；存储器也可以包括非易失性存储器(Non-VolatileMemory)，例如只读存储器(Read-Only Memory，ROM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，HDD)或固态硬盘(Solid-State Drive，SSD)；存储器404还可以包括上述种类的存储器的组合。存储器404用于存储一组程序代码，处理器401用于调用存储器404中存储的程序代码，执行如下操作：
接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理器401还用于：
将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。
可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：
响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。
可选地，所述处理器401还用于：
输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
可选地，所述处理器401还用于：
接收所述页面交互组件的输入数据；
在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。
可选地，所述接收组件操作事件之前，所述方法还包括：
定义所述页面交互组件所支持的功能操作；
采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；
为所述页面交互组件，编写及定义对应的操作处理逻辑；
对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；
将所述目标数据集成于所述页面交互组件中；
其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。
可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：
定义所述页面交互组件支持筛选的输入框；
定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；
定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；
定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；
定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；
定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。
由于本实施例所介绍的终端设备为实施本申请实施例中基于页面交互组件的操作处理方法所采用的终端设备，故而基于本申请实施例中所介绍的基于页面交互组件的操作处理方法，本领域所属技术人员能够了解本实施例的终端设备的具体实施方式以及其各种变化形式，所以在此对于该终端设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中基于页面交互组件的操作处理方法所采用的终端设备，都属于本申请所欲保护的范围。
上述本申请实施例中的技术方案，至少具有如下的技术效果或优点：本申请接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本申请采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种基于页面交互组件的操作处理方法，其特征在于，所述方法包括：
接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
2.根据权利要求1所述的方法，其特征在于，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述方法还包括：
将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。
3.根据权利要求1所述的方法，其特征在于，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：
响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factoryDefault、空值参数showNullValue、及无用参数disabled。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：
接收所述页面交互组件的输入数据；
在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。
6.根据权利要求1所述的方法，其特征在于，所述接收组件操作事件之前，所述方法还包括：
定义所述页面交互组件所支持的功能操作；
采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；
为所述页面交互组件，编写及定义对应的操作处理逻辑；
对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；
将所述目标数据集成于所述页面交互组件中；
其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。
7.根据权利要求6所述的方法，其特征在于，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：
定义所述页面交互组件支持筛选的输入框；
定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；
定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；
定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；
定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；
定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。
8.一种基于页面交互组件的操作处理装置，其特征在于，所述装置包括：接收模块和处理模块，其中：
所述接收模块，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；
所述处理模块，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。
9.一种终端设备，其特征在于，所述终端设备包括：处理器、存储器、通信接口和总线；所述处理器、所述存储器和所述通信接口通过所述总线连接并完成相互间的通信；所述存储器存储可执行程序代码；所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于执行如上权利要求1-7中任一项所述的基于页面交互组件的操作处理方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有程序，当所述程序运行在终端设备时执行如上权利要求1-7中任一项所述的基于页面交互组件的操作处理方法。
CN202111550466.5A 2021-12-17 2021-12-17 基于页面交互组件的操作处理方法、装置、设备及介质 Active CN114217877B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111550466.5A CN114217877B (zh) 2021-12-17 2021-12-17 基于页面交互组件的操作处理方法、装置、设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111550466.5A CN114217877B (zh) 2021-12-17 2021-12-17 基于页面交互组件的操作处理方法、装置、设备及介质

Publications (2)

Publication Number Publication Date
CN114217877A true CN114217877A (zh) 2022-03-22
CN114217877B CN114217877B (zh) 2024-07-16

Family

ID=80703643

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111550466.5A Active CN114217877B (zh) 2021-12-17 2021-12-17 基于页面交互组件的操作处理方法、装置、设备及介质

Country Status (1)

Country Link
CN (1) CN114217877B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115033235A (zh) * 2022-06-30 2022-09-09 浙江瑞华康源科技有限公司 基于低代码开发平台进行web页面灵活复用的系统及方法
CN119248411A (zh) * 2024-12-02 2025-01-03 天津南大通用数据技术股份有限公司 数据库管理界面操作方法、装置和电子设备

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1480839A (zh) * 2003-08-07 2004-03-10 刘自鸿 基于虚拟现实技术的室内综合运动模拟系统
US8489641B1 (en) * 2010-07-08 2013-07-16 Google Inc. Displaying layers of search results on a map
US20130346394A1 (en) * 2012-06-20 2013-12-26 Schlumberger Technology Corporation Virtual tree
JP2015076064A (ja) * 2013-10-11 2015-04-20 キヤノンマーケティングジャパン株式会社 情報処理装置、情報処理方法、プログラムならびに記憶媒体
CN108984714A (zh) * 2018-07-09 2018-12-11 北京三快在线科技有限公司 页面渲染方法、装置、电子设备及计算机可读介质
CN111639287A (zh) * 2020-04-29 2020-09-08 深圳壹账通智能科技有限公司 一种页面处理方法、装置、终端设备及可读存储介质
CN111984829A (zh) * 2020-07-08 2020-11-24 福建亿能达信息技术股份有限公司 一种基于vue的树异步加载方法、装置、设备和介质
CN112632933A (zh) * 2020-12-07 2021-04-09 平安国际智慧城市科技股份有限公司 快速制作Excel文件方法、快速制作装置及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1480839A (zh) * 2003-08-07 2004-03-10 刘自鸿 基于虚拟现实技术的室内综合运动模拟系统
US8489641B1 (en) * 2010-07-08 2013-07-16 Google Inc. Displaying layers of search results on a map
US20130346394A1 (en) * 2012-06-20 2013-12-26 Schlumberger Technology Corporation Virtual tree
JP2015076064A (ja) * 2013-10-11 2015-04-20 キヤノンマーケティングジャパン株式会社 情報処理装置、情報処理方法、プログラムならびに記憶媒体
CN108984714A (zh) * 2018-07-09 2018-12-11 北京三快在线科技有限公司 页面渲染方法、装置、电子设备及计算机可读介质
CN111639287A (zh) * 2020-04-29 2020-09-08 深圳壹账通智能科技有限公司 一种页面处理方法、装置、终端设备及可读存储介质
CN111984829A (zh) * 2020-07-08 2020-11-24 福建亿能达信息技术股份有限公司 一种基于vue的树异步加载方法、装置、设备和介质
CN112632933A (zh) * 2020-12-07 2021-04-09 平安国际智慧城市科技股份有限公司 快速制作Excel文件方法、快速制作装置及存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115033235A (zh) * 2022-06-30 2022-09-09 浙江瑞华康源科技有限公司 基于低代码开发平台进行web页面灵活复用的系统及方法
CN119248411A (zh) * 2024-12-02 2025-01-03 天津南大通用数据技术股份有限公司 数据库管理界面操作方法、装置和电子设备
CN119248411B (zh) * 2024-12-02 2025-03-25 天津南大通用数据技术股份有限公司 数据库管理界面操作方法、装置和电子设备

Also Published As

Publication number Publication date
CN114217877B (zh) 2024-07-16

Similar Documents

Publication Publication Date Title
US9524279B2 (en) Help document animated visualization
CN103608799A (zh) 自动用户界面对象变换和代码生成
CN105094832A (zh) 一种所见即所得的动态生成用户界面的方法和系统
EP4006662A1 (en) System and method supporting graphical programming based on neuron blocks, and storage medium
CN114217877A (zh) 基于页面交互组件的操作处理方法、装置、设备及介质
WO2013109858A1 (en) Design canvas
CN112988165A (zh) 基于Kubernetes的交互式建模方法、装置、电子设备及存储介质
US8832573B2 (en) Creating portals having consistent appearances
CN111158797A (zh) 运行人工智能应用的方法、系统及引擎装置
CN117055767A (zh) 基于Ant Design的表格数据筛选方法、装置、介质及电子设备
US20120011157A1 (en) Method and system for inferencing taxonomy topic concept objects using a metamodel instance model
CN113703638B (zh) 数据管理页面处理方法、装置、电子设备及存储介质
CN117235397B (zh) 一种表单数据输入方法、装置、介质
EP4573445A1 (en) Bridging ui elements across multiple operating systems
CN117742834A (zh) 一种低代码平台页面组件配置方法及装置
CN114691131A (zh) 针对用户界面ui文件的框架代码文件生成方法及装置
McKinney DartDraw: The Design and Implementation of Global State Management, User Interaction Management, and Text in a React-Redux Drawing Application
CN114691133A (zh) 一种项目预览组件的实现方法及系统
KR20140115456A (ko) 애플리케이션 개발 환경 제공 프로그램을 기록한 기록매체
KR20140114984A (ko) 애플리케이션 개발 환경 제공 장치
KR20140114983A (ko) 애플리케이션 개발 환경 제공 방법
KR20140094392A (ko) 애플리케이션 개발 환경 제공 방법 및 그 장치
Mannem Model-based user interface design
Ghoda Implementing the ViewModel
KR20140114964A (ko) 애플리케이션 개발 환경 제공 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체

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
GR01 Patent grant
GR01 Patent grant
CP03 Change of name, title or address

Address after: C101, floor 1, building 106, Lize Zhongyuan, Chaoyang District, Beijing 100102

Patentee after: SHANSHU SCIENCE AND TECHNOLOGY (BEIJING) Co.,Ltd.

Country or region after: China

Patentee after: SHANGHAI SHANSHU NETWORK TECHNOLOGY Co.,Ltd.

Patentee after: SHANSHU SCIENCE AND TECHNOLOGY (SUZHOU) Co.,Ltd.

Patentee after: Fifth Paradigm (Shenzhen) Technology Co.,Ltd.

Address before: C101, floor 1, building 106, Lize Zhongyuan, Chaoyang District, Beijing 100102

Patentee before: SHANSHU SCIENCE AND TECHNOLOGY (BEIJING) Co.,Ltd.

Country or region before: China

Patentee before: SHANGHAI SHANSHU NETWORK TECHNOLOGY Co.,Ltd.

Patentee before: SHANSHU SCIENCE AND TECHNOLOGY (SUZHOU) Co.,Ltd.

Patentee before: Shenzhen Shanzhi Technology Co.,Ltd.

CP03 Change of name, title or address