一种组件信息的展示方法、装置、设备及存储介质与流程

1.本公开实施例涉及计算机技术领域，尤其涉及一种组件信息的展示方法、装置、设备及存储介质。


背景技术：

2.在当今互联网科技飞速发展的背景下，互联网(web)前端技术进入了一个新的时代。以组件化为代表的开发方式已逐渐成为前端领域的主流趋势。随着越来越多的组件被开发出来，如何快速获取一个组件的使用方式，成为了编程人员在组件代码编写工作中最大的工作量。
3.现有技术中，获取组件使用方式的途径通常是通过浏览器查询相关文档网站。这样，在代码编写的过程中，需要编程人员一边对比浏览器的组件信息，一边进行代码编写。因此，就需要编程人员频繁的在浏览器和代码编写两个环境中来回的切换，从而导致代码编写过程需要耗费大量的时间资源，效率极低。


技术实现要素：

4.本公开实施例提供一种组件信息的展示方法、装置、设备及存储介质，以至少解决相关技术中，由于需要编程人员频繁的在浏览器和代码编写两个环境中来回的切换，从而导致代码编写过程需要耗费大量的时间资源，效率极低的问题。
5.本公开实施例的技术方案如下：
6.根据本公开实施例的第一方面，提供一种组件信息的展示方法，应用于代码编辑器。该方法包括：响应于在代码编辑区对目标候选组件的信息的触发操作，确定目标候选组件。在代码编辑区中显示目标候选组件。
7.结合第一方面，在一种可能的实现方式中，响应于在代码编辑区对目标候选组件的信息的触发操作，确定目标候选组件的方法包括：响应于在代码编辑区输入的针对搜索关键词的搜索指令，获取搜索关键词对应的至少一个候选组件的信息。在代码编辑区显示与搜索关键词对应的至少一个候选组件的信息。响应于在至少一个候选组件的信息中的点击操作，确定目标候选组件；目标候选组件为至少一个候选组件中的一个。
8.结合第一方面，在一种可能的实现方式中，该方法还包括：响应于对目标候选组件的触发操作，获取目标候选组件的数据包以及候选组件的依赖数据包。安装目标候选组件的数据包以及依赖数据包，并导入目标候选组件的数据包。
9.结合第一方面，在另一种可能的实现方式中，该方法还包括：显示目标候选组件的配置按钮。响应于对配置按钮的触发操作，显示至少一个配置控件；每个配置控件对应一个功能。响应于对至少一个目标配置控件的选取操作，显示与目标配置控件对应的功能的信息。目标配置控件为至少一个配置控件中的其中一个。
10.结合第一方面，在另一种可能的实现方式中，上述的响应于对至少一个目标配置控件的选取操作之后还包括：确定先选取的目标配置控件的功能与后选取的目标配置控件
的功能存在互斥的情况下，关闭对先选取的目标配置控件的选取操作。生成提示信息，并展示。提示信息用于提示先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况。
11.结合第一方面，在另一种可能的实现方式中，上述搜索指令的获取方法包括：接收用户在代码编辑区的预设位置输入的预设字符，显示搜索输入框。接收用户在搜索输入框中输入的第一搜索关键词，生成搜索指令。搜索关键词为第一搜索关键词。
12.结合第一方面，在另一种可能的实现方式中，上述的搜索指令的获取方法包括：接收用户在代码编辑区的预设位置输入的预设字符以及在预设字符之后输入的第二搜索关键词，生成搜索指令。搜索关键词为第二搜索关键词。
13.结合第一方面，在另一种可能的实现方式中，响应于针对搜索关键词的搜索指令，显示与搜索关键词对应的至少一个候选组件的信息的方法包括：应于针对搜索关键词的搜索指令，确定代码编辑区中当前编辑位置对应的技术栈。在技术栈对应的数据库中，搜索与搜索关键词对应的至少一个候选组件的信息。显示至少一个候选组件的信息。
14.结合第一方面，在另一种可能的实现方式中，在代码编辑区中显示目标候选组件，包括：获取目标候选组件的标签。在代码编辑区中显示目标候选组件的标签。
15.根据本公开实施例的第二方面，提供一种组件信息的展示装置，该展示装置包括：处理单元，被配置为响应于在代码编辑区对目标候选组件的信息的触发操作，确定目标候选组件。显示单元，被配置为在代码编辑区中显示处理单元的目标候选组件。
16.结合第二方面，在一种可能的实现方式中，获取单元，具体被配置为响应于在代码编辑区输入的针对搜索关键词的搜索指令，获取搜索关键词对应的至少一个候选组件的信息。显示单元，被配置为在代码编辑区显示与获取单元获取的搜索关键词对应的至少一个候选组件的信息。处理单元。被配置为响应于在显示单元显示的至少一个候选组件中的点击操作，确定目标候选组件；目标候选组件为至少一个候选组件中的一个。
17.结合第二方面，在一种可能的实现方式中，获取单元，还被配置为响应于对目标候选组件的触发操作，获取目标候选组件的数据包以及候选组件的依赖数据包。处理单元，被配置为安装获取单元获取的目标候选组件的数据包以及依赖数据包，并导入目标候选组件的数据包。
18.结合第二方面，在另一种可能的实现方式中，显示单元，还被配置为：显示目标候选组件的配置按钮；响应于对配置按钮的触发操作，显示至少一个配置控件；每个配置控件对应一个功能；响应于对至少一个目标配置控件的选取操作，显示与目标配置控件对应的功能的信息。目标配置控件为至少一个配置控件中的其中一个。
19.结合第二方面，在另一种可能的实现方式中，处理单元，还被配置为确定先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况下，关闭对先选取的目标配置控件的选取操作。处理单元，还被配置为生成提示信息；提示信息用于提示先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况。显示单元，被配置展示处理单元生成提示信息。
20.结合第二方面，在另一种可能的实现方式中，获取单元，具体被配置为接收用户在代码编辑区的预设位置输入的预设字符。显示单元，被配置为获取单元接收预设字符后，显示搜索输入框。获取单元，还被配置为接收用户在搜索输入框中输入的搜索关键词。处理单
元，被配置为根据获取单元接收第一搜索关键词，生成搜索指令。搜索关键词为第一搜索关键词。
21.结合第二方面，在另一种可能的实现方式中，获取单元，具体被配置为接收用户在代码编辑区的预设位置输入的预设字符以及在预设字符之后输入的第二搜索关键词。搜索关键词为第二搜索关键词。处理单元，被配置为根据获取单元接收的第二搜索关键词生成搜索指令。
22.结合第二方面，在另一种可能的实现方式中，处理单元，还被配置为响应于针对搜索关键词的搜索指令，确定代码编辑区中当前编辑位置对应的技术栈。处理单元，还被配置为在技术栈对应的数据库中，搜索与搜索关键词对应的至少一个候选组件的信息。显示单元，被配置为显示处理单元搜索的至少一个候选组件的信息。
23.结合第二方面，在另一种可能的实现方式中，获取单元，具体被配置为获取目标候选组件的标签。显示单元，被配置为在代码编辑区中显示获取单元获取的目标候选组件的标签。
24.根据本公开实施例的第三方面，提供一种电子设备，该电子设备包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现如上述第一方面所提供的组件信息的展示方法。
25.根据本公开实施例的第四方面，提供一种计算机可读存储介质，包括指令，当指令由电子设备中的处理器执行时，使得电子设备执行如上述第一方面所提供的组件信息的展示方法。
26.根据本公开实施例的第五方面，提供一种计算机程序产品，当计算机程序被电子设备中的处理器执行时，使得电子设备执行如上述第一方面所提供的组件信息的展示方法。
27.本公开实施例所提供的上述技术方案中，代码编辑器通过感知用户在代码编辑区对目标候选组件的信息的触发操作，即可确定用户需要的目标候选组件。并直接在代码编辑区中显示该目标候选组件。从而使用户无需从浏览器中查询获取相关组件的信息。为用户进行组件的代码编写提供便利，节省代码编写的时间，提高编程效率。
附图说明
28.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开实施例的实施例，并与说明书一起用于解释本公开实施例的原理，并不构成对本公开实施例的不当限定。
29.图1为本公开实施例提供的一种电子设备的结构示意图；
30.图2为本公开实施例提供的一种组件信息的展示方法的流程示意图之一；
31.图3为本公开实施例提供的一种组件信息的展示界面的示意图之一；
32.图4为本公开实施例提供的一种组件信息的展示方法的流程示意图之二；
33.图5a为本公开实施例提供的一种组件信息的展示界面的示意图之二；
34.图5b为本公开实施例提供的一种组件信息的展示界面的示意图之三；
35.图5c为本公开实施例提供的一种组件信息的展示界面的示意图之四；
36.图6为本公开实施例提供的一种组件信息的展示方法的流程示意图之三；
37.图7为本公开实施例提供的一种组件信息的展示界面的示意图之五；
38.图8为本公开实施例提供的一种组件信息的展示装置的结构示意图之一。
具体实施方式
39.为了使本领域普通人员更好地理解本公开实施例的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
40.需要说明的是，本公开实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开实施例的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开实施例的一些方面相一致的装置和方法的例子。
41.另外，在本公开实施例的描述中，除非另有说明，“/”表示或的意思，例如，a/b可以表示a或b；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，在本公开实施例的描述中，“多个”是指两个或多于两个。
42.在对本公开实施例进行详细地解释说明之前，先对本公开实施例涉及到的一些名词进行解释。
43.1、组件
44.组件(component)是对数据和方法的简单封装。c builder中，一个组件就是一个从tcomponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。vcl和clx组件是c builder系统的核心。在前端眼里，组件通常是指页面上的视图单元，即ui组件。可以说，ui组件是组件的子集。
45.2、前端技术栈
46.前端技术栈实际就是实现前端功能的不同方式。
47.3、导入(import)
48.当前端工程引入了一个组件后，需要对其使用import命令将进一步进入到页面级别的环境中。import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。
49.目前，现有理解组件使用方式的途径只能是通过浏览器查询相关文档网站。这样，在代码编写的过程中，需要编程人员一边对比浏览器的组件信息，一边进行代码编写。例如，当编程人员需要一个日历组件，通过浏览器搜索查询相关文档网站中的组件库文档里得到这个组件。假设用户期望显示阴历，他需要在组件库文档里再次进行查询，找到该日历组件对应的属性，并复制粘贴到自己的代码编写环境中。因此，就需要编程人员频繁的在浏览器和代码编写两个环境中来回的切换，从而导致代码编写过程需要耗费大量的时间资源，效率极低。
50.针对上述技术问题，本公开实施例提供一种组件信息的展示方法。下面首先对本公开实施例提供的一种组件信息的展示方法的应用场景进行介绍。
51.在实际应用中，本公开实施例提供的一种组件信息的展示方法应用于电子设备。该电子设备可以是终端，也可以是服务器，也可以是终端中用于实现组件信息的展示方法的装置(如编辑器)，也可以是服务器中中用于实现组件信息的展示方法的装置(如编辑器)。
52.示例性的，当本公开实施例中的电子设备为终端时，终端可以是手机、平板电脑、桌面型、膝上型、手持计算机、笔记本电脑、超级移动个人计算机(ultra
‑
mobile personal computer，umpc)、上网本，以及蜂窝电话、个人数字助理(personal digital assistant，pda)、增强现实(augmented reality，ar)\虚拟现实(virtual reality，vr)设备等具备程序编写功能，并运行相关程序的设备。本公开实施例对该终端的具体形态不作特殊限制。
53.图1是根据一示例性实施例示出的电子设备100的一种可能的结构示意图。
54.如图1所示，该电子设备100包括处理器110和存储器120。其中，存储器120用于存储处理器110可执行的指令，处理器110则可以实现上述实施例中页面信息的展示装置200中各个模块的功能。
55.其中，在具体的实现中，作为一种实施例，处理器110(110
‑
1和110
‑
2)可以包括一个或多个cpu，例如图1中所示的cpu0和cpu1。且作为一种实施例，页面信息的展示装置200可以包括多个处理器110，例如图1中所示的处理器11
‑
1和处理器11
‑
2。这些处理器110中的每一个cpu可以是一个单核处理器(single
‑
cpu)，也可以是一个多核处理器(multi
‑
cpu)。这里的处理器110可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。
56.存储器120可以是只读存储器120(read
‑
only memory，rom)或可存储静态信息和指令的其他类型的静态存储设备，随机存取存储器(random access memory，ram)或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器(electrically erasable programmable read
‑
only memory，eeprom)、只读光盘(compact disc read
‑
only memory，cd
‑
rom)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘可读存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器120可以是独立存在，通过总线130与处理器110相连接。存储器120也可以和处理器110集成在一起。
57.总线130，可以是工业标准体系结构(industry standard architecture，isa)总线、外部设备互连(peripheral component interconnect，pci)总线或扩展工业标准体系结构(extended industry standard architecture，eisa)总线等。该总线130可以分为地址总线、数据总线、控制总线等。为便于表示，图1中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
58.另外，为了方便电子设备100与其他设备(例如服务器)进行信息交互，该电子设备100包括通信接口140。通信接口140，使用任何收发器一类的装置，用于与其他设备或通信网络通信，如控制系统、无线接入网(radio access network，ran)，无线局域网(wireless local area networks，wlan)等。通信接口140可以包括接收单元实现接收功能，以及发送单元实现发送功能。
59.本领域技术人员可以理解，图1中示出的结构并不构成对电子设备的限定，可以包
括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
60.以下结合具体实施例，对本公开实施例所提供的组件信息的展示方法进行介绍，本实施例所提供方法可以应用于代码编辑器，代码编辑器的一种实现方式为上述图1中电子设备110，以至少解决相关技术中，需要编程人员频繁的在浏览器和编程两个环境中来回的切换，组件的编写过程需要耗费大量的时间资源，效率极低的问题。
61.如图2所示，本公开实施例提供的组件信息的展示方法具体包括：以下s201
‑
s202。
62.s201、电子设备响应于在代码编辑区对目标候选组件的信息的触发操作，确定目标候选组件。
63.进一步的，目标候选组件的信息可以包括：组件名称、作者以及可应用的开发环境的一项或多项。如，组件xx：作者xxx，vue。
64.s202、电子设备在代码编辑区中显示目标候选组件。
65.可选的，电子设备获取目标候选组件的标签；在代码编辑区中显示目标候选组件的标签。
66.具体的，在电子设备的代码编辑区的光标处显示该目标候选组件的标签。例如，参照图3所示，选择组件g后在代码编辑区50的光标处显示组件g的标签为g
‑
日历(calendar)。
67.进一步的，电子设备在显示目标候选组件的标签后，还可以显示该目标候选组件的默认的配置信息。具体示例参照图3。
68.本公开实施例所提供的上述技术方案中，代码编辑器通过感知用户在代码编辑区对目标候选组件的信息的触发操作，即可确定用户需要的目标候选组件。并直接在代码编辑区中显示该目标候选组件。从而使用户无需从浏览器中查询获取相关组件的信息。为用户进行组件的代码编写提供便利，节省代码编写的时间，提高编程效率。
69.可选的，结合图2，参照图4，s201具体包括：
70.s2011、电子设备响应于在代码编辑区输入的针对搜索关键词的搜索指令，获取搜索关键词对应的至少一个候选组件的信息。
71.需要说明的是，在电子设备中获取与搜索关键词对应的至少一个候选组件的信息，需要提前将组件的信息以及组件的配置信息提前导入电子设备的本地数据库中。
72.在一种实现方式中，电子设备响应于针对搜索关键词的搜索指令，确定代码编辑区中当前编辑位置对应的技术栈。在技术栈对应的数据库中，搜索与搜索关键词对应的至少一个候选组件的信息。并显示至少一个候选组件的信息。
73.需要说明的是，电子设备通过检测用户使用的技术栈(即开发环境)，确定在技术栈与搜索关键词对应的至少一个候选组件。其中，检测用户使用的技术栈可通过文件名的后缀或者文件的配置项确定。
74.该实现方式通过确定代码编辑区中当前编辑位置对应的技术栈，在该技术栈对应的数据库中获取与搜索关键词对应的至少一个候选组件的信息并显示。从而保证了该组件的程序在代码编辑器中的正常运行。
75.可选的，针对s2011中的搜索指令具有两种获取方法，具体包括：
76.方法一：电子设备接收用户在代码编辑区的预设位置输入的预设字符，显示搜索输入框。接收用户在搜索输入框中输入的第一搜索关键词，生成搜索指令。其中，搜索关键词为第一搜索关键词。
77.示例性的，可在搜索输入框中输入与目标候选组件相关的文字(同义词等)。例如，需要搜索有关于日历的组件，可以在搜索输入框中输入“日历”、“黄历”或者“万年历”等搜索关键字。
78.本公开实施例通过上述方法一中的搜索指令的获取方法，在用户输入预设字符后直接显示搜索输入框。使得用户在搜索输入框中输入第一搜索关键词即可生成搜索指令，以便获取所需搜索的组件，从而为用户获取组件的信息提供便利。
79.方法二：电子设备接收用户在代码编辑区的预设位置输入的预设字符以及在预设字符之后输入的第二搜索关键词，生成搜索指令。其中，搜索关键词为第二搜索关键词。
80.需要说明的是，对在预设字符之后输入的第二搜索关键词的具体位置不作限定。比如，可以是在预设字符之后紧接着输入第二搜索关键词。再比如，可以是在预设字符之后，与预设字符间隔一个空格符后输入第二搜索关键词。再比如，可以再预设字符的下一行输入第二搜索关键词。
81.本公开实施例通过上述方法二中的搜索指令的获取方法，在用户输入的预设字符之后直接输入搜索关键词，即可生成搜索指令，进而获取所需搜索的组件，为用户获取组件的信息提供便利。
82.在本实施例中，结合图5a，对上述两种获取方法进行示例性说明，用户可以可在电子设备的代码编辑区50中输入左尖括号“<”，在第三区域5012处显示搜索输入框。搜索关键词有两种输入方式：一种是在代码编辑页面50的左尖括号“<”后面输入搜索关键词；另一种是在搜索输入框5013中输入搜索关键词。这里需要说明的是，在左尖括号“<”后面输入搜索关键词通常为英文字母组合，在搜索输入框中输入搜索关键词通常为汉字组合。但本技术对此不作限定。
83.s2012、电子设备在代码编辑区显示与搜索关键词对应的至少一个候选组件的信息。
84.示例性的，参照图5a所示，以日历组件为例，当搜索关键词为日历时，检测开发环境，在相关显示界面显示在该开发环境下与日历相关的组件的信息可以包括：组件xx：作者xxx，可应用的开发环境。图5a中示出了在代码编辑区50上的第一界面501中的第一区域5011中显示组件a
‑
组件e的信息以及在第二区域5012中显示相关提示内容；该提示内容可以是如图5a所示的检测到开发环境为vue，为您推荐以下“日历相关组件”。当然提示内容可以根据用户的使用需求以及使用体验感进行变更，这里对其不作限定。需要说明的是，图5a中仅示出了第一界面501与代码编辑区50其中一种显示方式；第一界面501可以是代码编辑区50的一个子界面，也可以是独立的界面，本公开实施例对此不作任何限制。
85.在另一示例中，当第一区域5011的界面大小不足以显示全部的组件的信息，添加翻页功能。比如，可以是如图5b所示的在第一区域5011中加入上一页的控件以及下一页的控件；可以通过点击上一页的控件5b1以及下一页的控件5b2查看；当前页面为首页的情况时，上一页的控件可以显示为灰色。同理，当前页面为尾页的情况是，下一页的空间可以显示为灰色。又比如，可以是如图5c所示的在第一区域的右侧加入滚动条5c1，以便用户通过滑动滚动条中的滚动控件5c1上下查看全部的组件的信息。
86.s2013、电子设备响应于在至少一个候选组件的信息中的点击操作，确定目标候选组件；目标候选组件为至少一个候选组件中的一个。
87.例如，如图5a所示，当用户在查看所显示的组件的信息中，需要的组件g时，用户可以通过鼠标点击组件g进行选取。
88.示例性的，对目标候选组件的触发操作可以是点击操作；点击操作可以是单击操作、双击操作、滑动操作等任意可行的操作，具体可以根据实际需求而定，本公开实施例不作具体限制。另外，本公开实施例所涉及的选取操作以及其他触发操作均参照上述的点击操作的说明。
89.本公开实施例所提供的上述技术方案中，通过对搜索关键词的搜索指令的响应，为用户直观的展示可选择的一个或多个候选组件的信息，使得用户根据候选组件的信息直接选取所需要的组件。无需从浏览器中查询获知相关组件的信息，为用户进行组件的代码编写提供便利，节省代码编写的时间，提高编程效率。
90.在一种实现方式，结合图2，参照图6，本公开实施例所提供的组件信息的展示方法还包括s203和s204。
91.s203、电子设备响应于对目标候选组件的触发操作，获取目标候选组件的数据包以及候选组件的依赖数据包。
92.具体的，依赖数据包包含运行所选择的目标候选组件的环境文件。在用户选择目标候选组件后，电子设备获取该目标候选组件的依赖数据包。在此基础上，若需要使用该代码，需要在仓库中找到该代码(即依赖数据包)的地址，然后将该代码下载，并运行在应用的程序代码中。
93.需要说明的是，本公开的实施例中的依赖数据包也可以称为“插件”。
94.s204、电子设备安装目标候选组件的数据包以及依赖数据包，并导入目标候选组件的数据包。
95.可选的，在代码编辑区使用import语句引入目标候选组件。
96.另外，在安装目标候选组件的依赖数据包时，对比文件中的已安装依赖数据包，当为同一依赖数据包时，将两者合并。
97.在本实现方式中，通过对显示的至少一个候选组件中的目标候选组件的触发操作，即可直接获取并安装目标候选组件的数据包以及候选组件的依赖数据包。为编程人员在编写代码的过程中提供便利，节省代码编写时间。
98.在一种实现方式中，参照图6，本公开实施例所提供的组件信息的展示方法还包括s205
‑
s207。
99.s205、电子设备显示目标候选组件的配置按钮。
100.s206、电子设备响应于对配置按钮的触发操作，显示至少一个配置控件；每个配置控件对应一个功能。
101.s207、电子设备响应于对至少一个目标配置控件的选取操作，显示与目标配置控件对应的功能的信息。目标配置控件为至少一个配置控件中的其中一个。
102.为了更好的理解，参照图7，针对s205
‑
s206进行示例性的说明，在代码编辑区50的目标候选组件的标签的右上角展示配置控件701(如图7所示的info按钮701)。编程人员通过鼠标等工具对info按钮701的点击(即触发操作)，显示与目标候选组件对应的至少一个配置控件(如图7所示的显示阴历对应开关控件7011、默认展示对应的开关控件7012以及显示节日对应的开关控件7013)。编程人员通过鼠标等工具对开关控件进行点击(即选取操
作)，显示对应开关控件的状态(该状态为开或关)。
103.在本实现方式中，通过响应于用户对展示的配置控件的触发操作，为用户直观的展示可选择的一个或多个配置的信息，使得用户根据候选组件的信息直接选取所需要的配置。无需从浏览器中查询获知相关配置的信息，为用户进行组件的配置代码编写提供便利，节省代码编写的时间，提高编程效率。
104.进一步的，参照图6，s207中的电子设备响应于对至少一个目标配置控件的选取操作之后，还包括如下步骤：
105.s2071、电子设备确定先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况下，关闭对先选取的目标配置控件的选取操作。
106.s2072、电子设备生成提示信息，并展示；提示信息用于提示先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况。
107.具体的，参照图7所示，假设显示阴历(即显示阴历的开关状态为“开”)无法同时显示开关(即显示节日的开关状态的“开”)；则认为显示阴历的功能与显示开关的功能存在为互斥的情况。若先选取的显示阴历，后选取的显示开关，则默认关闭显示阴历功能，并生成如图7所示的“ps：当显示节日为ture时，显示阴历不可用”的提示信息
108.本公开实施例通过确定选取的两个目标配置控件对应的功能存在冲突的情况下，关闭在先选取的功能，并提示用户选取的功能间存在冲突的提示信息。这样不仅能够避免冲突属性，减少潜在漏洞；还能提高用户的使用体验感。
109.参照图8，为本公开实施例提供的一种组件信息的展示装置的结构示意图。应用于终端，其中，该组件信息的展示装置80包括：获取单元801、显示单元802以及处理单元803。其中：
110.处理单元803，被配置为响应于在代码编辑区对目标候选组件的信息的触发操作，确定目标候选组件。例如，结合图2所示，处理单元803可以用于执行s201。
111.显示单元802，被配置为在代码编辑区中显示处理单元803的目标候选组件。例如，结合图2所示，获取单元801可以用于执行s202。
112.在一种示例性的方案中，获取单元801，具体被配置为响应于在代码编辑区输入的针对搜索关键词的搜索指令，获取搜索关键词对应的至少一个候选组件的信息。例如，结合图4所示，获取单元801可以用于执行s2011。
113.显示单元802，被配置为在代码编辑区显示与获取单元801获取的搜索关键词对应的至少一个候选组件的信息。例如，结合图4所示，显示单元802可以用于执行s2012。
114.处理单元803。被配置为响应于在显示单元802显示的至少一个候选组件的信息中的点击操作，确定目标候选组件；目标候选组件为至少一个候选组件中的一个。例如，结合图4所示，处理单元803可以用于执行s2013。
115.在一种示例性的方案中，获取单元801，还被配置为响应于对目标候选组件的触发操作，获取目标候选组件的数据包以及候选组件的依赖数据包。
116.处理单元803，被配置为安装获取单元801获取的目标候选组件的数据包以及依赖数据包，并导入目标候选组件的数据包。
117.在一种示例性的方案中，显示单元802，还被配置为：显示目标候选组件的配置按钮。响应于对配置按钮的触发操作，显示至少一个配置控件；每个配置控件对应一个功能。
响应于对至少一个目标配置控件的选取操作，显示与目标配置控件对应的功能的信息；目标配置控件为至少一个配置控件中的其中一个。
118.在一种示例性的方案中，处理单元803，还被配置为确定先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况下，关闭对先选取的目标配置控件的选取操作。
119.处理单元803，还被配置为生成提示信息；提示信息用于提示先选取的目标配置控件的功能与后选取的目标配置控件的功能存在互斥的情况。
120.显示单元802，被配置展示处理单元803生成提示信息。
121.在一种示例性的方案中，获取单元801，具体被配置为接收用户在代码编辑区的预设位置输入的预设字符。
122.显示单元802，被配置为获取单元801接收预设字符后，显示搜索输入框。
123.获取单元801，还被配置为接收用户在搜索输入框中输入的第一搜索关键词；搜索关键词为第一搜索关键词。
124.处理单元803，被配置为根据获取单元801接收搜索关键词，生成搜索指令。
125.在一种示例性的方案中，获取单元801，具体被配置为接收用户在代码编辑区的预设位置输入的预设字符以及在预设字符之后输入的第二搜索关键词；搜索关键词为第二搜索关键词。
126.处理单元803，被配置为根据获取单元801接收的第二搜索关键词生成搜索指令。
127.在一种示例性的方案中，处理单元803，还被配置为响应于针对搜索关键词的搜索指令，确定代码编辑区中当前编辑位置对应的技术栈。
128.处理单元803，还被配置为在技术栈对应的数据库中，搜索与搜索关键词对应的至少一个候选组件的信息。
129.显示单元802，被配置为显示处理单元803搜索的至少一个候选组件的信息。
130.在一种示例性的方案中，获取单元801，具体被配置为获取目标候选组件的标签。
131.显示单元802，被配置为在代码编辑区中显示获取单元801获取的目标候选组件的标签。
132.当然，本公开实施例提供的组件信息的展示装置80包括但不限于上述单元，例如组件信息的展示装置80还可以包括存储单元804。存储单元804可以用于存储该组件信息的展示装置80的程序代码，还可以用于存储组件信息的展示装置80在运行过程中生成的数据，如写请求中的数据等。
133.另外，本公开实施例还提供一种计算机可读存储介质，包括指令，当指令由处理器执行时，使得处理器执行如上述实施例所提供的组件信息的展示方法；或者，当指令由处理器执行时，使得处理器执行如上述实施例所提供的组件信息的展示方法。
134.另外，本公开实施例还提供一种计算机程序产品，包括指令，当指令由处理器执行时，使得处理器执行如上述实施例所提供的组件信息的展示方法；或者，当指令由处理器执行时，使得处理器执行如上述实施例所提供的组件信息的展示方法。
135.在示例性实施例中，本公开实施例还提供了一种组件信息的展示系统，包括终端和服务器，终端用于执行上述实施例的组件信息的展示方法中的终端的功能，服务器用于执行上述实施例的组件信息的展示方法中服务器的功能，且能达到相同的技术效果，为避
免重复，这里不再赘述。
136.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开实施例的其它实施方案。本公开实施例旨在涵盖本公开实施例的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开实施例的一般性原理并包括本公开实施例未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开实施例的真正范围和精神由下面的权利要求指出。