CN113568608A

CN113568608A - Component information display method, device, equipment and storage medium

Info

Publication number: CN113568608A
Application number: CN202110776238.3A
Authority: CN
Inventors: 王少星
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2021-07-08
Filing date: 2021-07-08
Publication date: 2021-10-29

Abstract

The embodiment of the disclosure relates to a method, a device, equipment and a storage medium for displaying component information, and relates to the technical field of computers. The embodiment of the disclosure can solve the problems that in the related art, as programmers need to frequently switch back and forth between the browser environment and the code writing environment, a large amount of time resources need to be consumed in the code writing process, and the efficiency is extremely low. The method comprises the following steps: and displaying information of at least one candidate component corresponding to the search keyword in response to the search instruction for the search keyword. Responding to the trigger operation of the target candidate component, and acquiring a label of the target candidate component; the target candidate component is one of the at least one candidate component. The tags of the target candidate components are displayed.

Description

Component information display method, device, equipment and storage medium

Technical Field

The embodiment of the disclosure relates to the technical field of computers, in particular to a method, a device, equipment and a storage medium for displaying component information.

Background

Under the background of the rapid development of internet technology, the internet (Web) front-end technology has entered a new era. Development approaches typified by componentization have gradually become a mainstream trend in the frontend field. As more and more components are developed, how to quickly acquire the usage pattern of a component becomes the largest workload of a programmer in the component code writing work.

In the prior art, the way to obtain the usage mode of the component is usually to query the relevant document website through a browser. In this way, in the process of code writing, a programmer needs to write the code while comparing the component information of the browser. Therefore, the programmer is required to frequently switch back and forth between the browser environment and the code writing environment, so that a large amount of time resources are consumed in the code writing process, and the efficiency is extremely low.

Disclosure of Invention

The embodiment of the disclosure provides a method, a device, equipment and a storage medium for displaying component information, so as to solve at least the problems that in the related art, a programmer needs to frequently switch back and forth between a browser environment and a code compiling environment, so that a large amount of time resources need to be consumed in the code compiling process, and the efficiency is extremely low.

The technical scheme of the embodiment of the disclosure is as follows:

according to a first aspect of the embodiments of the present disclosure, a method for displaying component information is provided, which is applied to a code editor. The method comprises the following steps: and determining the target candidate component in response to the triggering operation of the information of the target candidate component in the code editing area. The target candidate component is displayed in the code editing area.

With reference to the first aspect, in a possible implementation manner, in response to a trigger operation on information of a target candidate component in a code editing area, a method for determining the target candidate component includes: and responding to a search instruction aiming at the search keyword input in the code editing area, and acquiring information of at least one candidate component corresponding to the search keyword. And displaying information of at least one candidate component corresponding to the search keyword in the code editing area. Determining a target candidate component in response to a click operation in the information of at least one candidate component; the target candidate component is one of the at least one candidate component.

With reference to the first aspect, in a possible implementation manner, the method further includes: and responding to the triggering operation of the target candidate component, and acquiring a data packet of the target candidate component and a dependent data packet of the candidate component. And installing the data packet of the target candidate component and the dependent data packet, and importing the data packet of the target candidate component.

With reference to the first aspect, in another possible implementation manner, the method further includes: configuration buttons for the target candidate components are displayed. Responding to the triggering operation of the configuration button, and displaying at least one configuration control; each configuration control corresponds to a function. And responding to the selection operation of at least one target configuration control, and displaying the information of the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.

With reference to the first aspect, in another possible implementation manner, after the above responding to the selection operation of the at least one target configuration control, the method further includes: and under the condition that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, closing the selection operation of the first selected target configuration control. And generating and displaying prompt information. The prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

With reference to the first aspect, in another possible implementation manner, the method for obtaining the search instruction includes: and receiving preset characters input by a user at a preset position of the code editing area, and displaying a search input box. And receiving a first search keyword input in the search input box by a user, and generating a search instruction. The search keyword is a first search keyword.

With reference to the first aspect, in another possible implementation manner, the method for obtaining the search instruction includes: and receiving a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character, and generating a search instruction. The search keyword is a second search keyword.

With reference to the first aspect, in another possible implementation manner, in response to a search instruction for a search keyword, a method for displaying information of at least one candidate component corresponding to the search keyword includes: and determining a technology stack corresponding to the current editing position in the code editing area in response to a search instruction aiming at the search keyword. And searching the database corresponding to the technology stack for the information of at least one candidate component corresponding to the search keyword. Information of at least one candidate component is displayed.

With reference to the first aspect, in another possible implementation manner, displaying target candidate components in a code editing area includes: the label of the target candidate component is obtained. The tags of the target candidate components are displayed in the code editing area.

According to a second aspect of the embodiments of the present disclosure, there is provided a display apparatus of component information, the display apparatus including: and the processing unit is configured to respond to the triggering operation of the information of the target candidate component in the code editing area and determine the target candidate component. A display unit configured to display the target candidate component of the processing unit in the code editing region.

With reference to the second aspect, in a possible implementation manner, the obtaining unit is specifically configured to obtain, in response to a search instruction for a search keyword input in the code editing area, information of at least one candidate component corresponding to the search keyword. A display unit configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit in the code editing area. And a processing unit. Configured to determine a target candidate component in response to a click operation in at least one candidate component displayed on the display unit; the target candidate component is one of the at least one candidate component.

With reference to the second aspect, in a possible implementation manner, the obtaining unit is further configured to obtain, in response to a trigger operation on the target candidate component, a data packet of the target candidate component and a dependent data packet of the candidate component. And the processing unit is configured to install the data packet of the target candidate component and the dependent data packet acquired by the acquisition unit and import the data packet of the target candidate component.

With reference to the second aspect, in another possible implementation manner, the display unit is further configured to: displaying a configuration button of the target candidate component; responding to the triggering operation of the configuration button, and displaying at least one configuration control; each configuration control corresponds to a function; and responding to the selection operation of at least one target configuration control, and displaying the information of the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.

With reference to the second aspect, in another possible implementation manner, the processing unit is further configured to close the selection operation on the first selected target configuration control when it is determined that the function of the first selected target configuration control and the function of the second selected target configuration control are mutually exclusive. A processing unit further configured to generate a prompt message; the prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive. And the display unit is configured to display the prompt information generated by the processing unit.

With reference to the second aspect, in another possible implementation manner, the obtaining unit is specifically configured to receive a preset character input by a user at a preset position of the code editing area. And the display unit is configured to display the search input box after the acquisition unit receives the preset character. And the acquisition unit is also configured to receive a search keyword input in the search input box by a user. And the processing unit is configured to generate a search instruction according to the first search keyword received by the acquisition unit. The search keyword is a first search keyword.

With reference to the second aspect, in another possible implementation manner, the obtaining unit is specifically configured to receive a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character. The search keyword is a second search keyword. And the processing unit is configured to generate a search instruction according to the second search keyword received by the acquisition unit.

With reference to the second aspect, in another possible implementation manner, the processing unit is further configured to determine, in response to a search instruction for the search keyword, a technology stack corresponding to a current editing position in the code editing area. The processing unit is further configured to search the database corresponding to the technology stack for information of at least one candidate component corresponding to the search keyword. A display unit configured to display information of the at least one candidate component searched by the processing unit.

With reference to the second aspect, in another possible implementation manner, the obtaining unit is specifically configured to obtain a tag of the target candidate component. A display unit configured to display the label of the target candidate component acquired by the acquisition unit in the code editing area.

According to a third aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the method for presenting component information as provided in the first aspect above.

According to a fourth aspect of embodiments of the present disclosure, there is provided a computer-readable storage medium including instructions that, when executed by a processor in an electronic device, cause the electronic device to perform the method for presenting component information as provided in the above first aspect.

According to a fifth aspect of embodiments of the present disclosure, there is provided a computer program product, which, when executed by a processor in an electronic device, causes the electronic device to perform the method for presenting component information as provided in the above first aspect.

In the technical scheme provided by the embodiment of the disclosure, the code editor can determine the target candidate component required by the user by sensing the trigger operation of the user on the information of the target candidate component in the code editing area. And displays the target candidate component directly in the code editing area. Thereby the user does not need to inquire the information of the related components from the browser. The method and the device provide convenience for a user to compile the codes of the components, save the time for compiling the codes and improve the programming efficiency.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the embodiments of the disclosure and, together with the description, serve to explain the principles of the embodiments of the disclosure and are not to be construed as unduly limiting the embodiments of the disclosure.

Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure;

fig. 2 is a schematic flow chart of a method for displaying component information according to an embodiment of the present disclosure;

fig. 3 is one of schematic diagrams of a display interface of component information according to an embodiment of the present disclosure;

fig. 4 is a second schematic flowchart of a method for displaying component information according to an embodiment of the present disclosure;

fig. 5A is a second schematic diagram of a display interface of component information according to the embodiment of the present disclosure;

fig. 5B is a third schematic diagram of a display interface of component information according to the embodiment of the present disclosure;

fig. 5C is a fourth schematic diagram of a display interface of component information according to an embodiment of the disclosure;

fig. 6 is a third schematic flowchart illustrating a method for displaying component information according to an embodiment of the present disclosure;

FIG. 7 is a fifth illustration of a display interface of component information provided by an embodiment of the disclosure;

fig. 8 is a schematic structural diagram of a device for displaying component information according to an embodiment of the present disclosure.

Detailed Description

In order to make the technical solutions of the embodiments of the present disclosure better understood by those of ordinary skill in the art, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.

It should be noted that the terms "first," "second," and the like in the description and claims of the embodiments of the present disclosure and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the disclosure described herein are capable of operation in sequences other than those illustrated or otherwise described herein. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with embodiments of the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the disclosed embodiments, as detailed in the appended claims.

In addition, in the description of the embodiments of the present disclosure, "/" indicates an inclusive meaning unless otherwise specified, for example, a/B may indicate a or B; "and/or" herein is merely an association describing an associated object, and means that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, in the description of the embodiments of the present disclosure, "a plurality" means two or more than two.

Before explaining the embodiments of the present disclosure in detail, some terms related to the embodiments of the present disclosure are explained.

1. Assembly

A component is a simple encapsulation of data and methods. In C + + Builder, a component is a specific object derived from TComponent. The components may have their own properties and methods. An attribute is a simple visitor to component data. The method is some simple and visible function of the component. The use of components can enable drag-and-drop programming, fast property handling, and true object-oriented design. The VCL and CLX components are the core of the C + + Builder system. In the front eye, a component generally refers to a view element on a page, i.e., a UI component. It can be said that the UI components are a subset of the components.

2. Front-end technology stack

The front-end technology stack is actually a different way to implement the front-end functionality.

3. Import (import)

After the front-end engineering introduces a component, it needs to use import command to enter into the environment of page level further. The import syntax declares the original values for importing functions, objects, specified files (or modules) from exported modules, scripts.

Currently, the only way to understand the way components are used is to query the relevant document web sites through a browser. In this way, in the process of code writing, a programmer needs to write the code while comparing the component information of the browser. For example, when a programmer needs a calendar component, the component is retrieved by a browser search query from a component library document in a related document website. Assuming that the user desires to display the lunar calendar, he needs to query again in the component library document, find the attributes corresponding to the calendar component, and copy and paste into his own code writing environment. Therefore, the programmer is required to frequently switch back and forth between the browser environment and the code writing environment, so that a large amount of time resources are consumed in the code writing process, and the efficiency is extremely low.

In view of the above technical problems, the embodiments of the present disclosure provide a method for displaying component information. First, an application scenario of the method for displaying component information provided by the embodiment of the present disclosure is described below.

In practical application, the method for displaying the component information provided by the embodiment of the disclosure is applied to electronic equipment. The electronic device may be a terminal, a server, a device (e.g., an editor) in the terminal for implementing the method for displaying the component information, or a device (e.g., an editor) in the server for implementing the method for displaying the component information.

For example, when the electronic device in the embodiment of the present disclosure is a terminal, the terminal may be a mobile phone, a tablet computer, a desktop, a laptop, a handheld computer, a notebook, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a Personal Digital Assistant (PDA), an Augmented Reality (AR) device, and the like, which have a program writing function and operate a related program. The embodiment of the present disclosure does not particularly limit the specific form of the terminal.

Fig. 1 is a schematic diagram illustrating one possible configuration of an electronic device 100 according to an example embodiment.

As shown in fig. 1, the electronic device 100 includes a processor 110 and a memory 120. The memory 120 is configured to store instructions executable by the processor 110, and the processor 110 may implement the functions of the modules in the apparatus 200 for displaying page information in the foregoing embodiments.

In particular implementations, among other things, processors 110(110-1 and 110-2) may comprise one or more CPUs, such as CPU0 and CPU1 shown in FIG. 1, for example, as one embodiment. And as an example, the presentation apparatus 200 of page information may include a plurality of processors 110, such as the processor 11-1 and the processor 11-2 shown in fig. 1. Each of the processors 110 may be a Single-core processor (Single-CPU) or a Multi-core processor (Multi-CPU). Processor 110 may refer herein to one or more devices, circuits, and/or processing cores that process data (e.g., computer program instructions).

The memory 120 may be, but is not limited to, a read-only memory 120 (ROM) or other type of static storage device that may store static information and instructions, a Random Access Memory (RAM) or other type of dynamic storage device that may store information and instructions, an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), a disk-readable storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer. The memory 120 may be self-contained and coupled to the processor 110 via a bus 130. Memory 120 may also be integrated with processor 110.

The bus 130 may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an extended ISA (enhanced industry standard architecture) bus, or the like. The bus 130 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 1, but it is not intended that there be only one bus or one type of bus.

In addition, in order to facilitate information interaction between the electronic device 100 and other devices (e.g., servers), the electronic device 100 includes a communication interface 140. The communication interface 140, which may be any transceiver or other communication device, is used to communicate with other devices or communication networks, such as a control system, a Radio Access Network (RAN), a Wireless Local Area Network (WLAN), and so on. The communication interface 140 may include a receiving unit implementing a receiving function and a transmitting unit implementing a transmitting function.

Those skilled in the art will appreciate that the configuration shown in fig. 1 does not constitute a limitation of the electronic device, and may include more or fewer components than those shown, or combine certain components, or employ a different arrangement of components.

The method for displaying component information provided by the embodiment of the present disclosure is described below with reference to a specific embodiment, and the method provided by the embodiment may be applied to a code editor, where one implementation manner of the code editor is the electronic device 110 in fig. 1, so as to solve at least the problems in the related art that a programmer needs to frequently switch between a browser environment and a programming environment, a compiling process of a component needs to consume a large amount of time resources, and efficiency is extremely low.

As shown in fig. 2, the method for displaying component information provided in the embodiment of the present disclosure specifically includes: S201-S202 below.

S201, the electronic equipment determines the target candidate component in response to the trigger operation of the information of the target candidate component in the code editing area.

Further, the information of the target candidate component may include: component name, author, and one or more of the applicable development environments. For example, component XX: authors XXX, VUE.

S202, the electronic equipment displays the target candidate components in the code editing area.

Optionally, the electronic device obtains a tag of the target candidate component; the tags of the target candidate components are displayed in the code editing area.

Specifically, the label of the target candidate component is displayed at a cursor of a code editing area of the electronic device. For example, referring to FIG. 3, the label of the component G displayed at the cursor of the code editing area 50 after the component G is selected is G-calendar (calendar).

Further, after displaying the tag of the target candidate component, the electronic device may further display default configuration information of the target candidate component. A specific example refers to fig. 3.

Optionally, with reference to fig. 4 in combination with fig. 2, S201 specifically includes:

and S2011, the electronic equipment responds to a search instruction aiming at the search keyword input in the code editing area, and acquires information of at least one candidate component corresponding to the search keyword.

It should be noted that, acquiring information of at least one candidate component corresponding to the search keyword in the electronic device requires to import the information of the component and the configuration information of the component into a local database of the electronic device in advance.

In one implementation, the electronic device determines a technology stack corresponding to a current editing position in the code editing area in response to a search instruction for a search keyword. And searching the database corresponding to the technology stack for the information of at least one candidate component corresponding to the search keyword. And displaying information of the at least one candidate component.

It should be noted that, the electronic device determines at least one candidate component corresponding to the search keyword in the technology stack by detecting the technology stack (i.e., the development environment) used by the user. Wherein, the technical stack used by the user can be determined by the suffix of the file name or the configuration item of the file.

The implementation mode obtains and displays the information of at least one candidate component corresponding to the search keyword in a database corresponding to a technology stack by determining the technology stack corresponding to the current editing position in the code editing area. Thereby ensuring the normal operation of the program of the component in the code editor.

Optionally, there are two obtaining methods for the search instruction in S2011, which specifically include:

the method comprises the following steps: the electronic equipment receives preset characters input by a user at preset positions of the code editing area and displays a search input box. And receiving a first search keyword input in the search input box by a user, and generating a search instruction. The search keywords are first search keywords.

For example, words (synonyms, etc.) related to the target candidate component may be entered in the search input box. For example, if a component related to a calendar needs to be searched, a search keyword such as "calendar", "yellow calendar" or "perpetual calendar" may be entered in the search input box.

According to the method for acquiring the search instruction in the first method, the search input box is directly displayed after the user inputs the preset character. The user can input the first search keyword in the search input box to generate a search instruction so as to acquire the component required to be searched, and therefore convenience is provided for the user to acquire the information of the component.

The second method comprises the following steps: the electronic equipment receives a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character, and generates a search instruction. And the search keyword is a second search keyword.

It should be noted that the specific position of the second search keyword input after the preset character is not limited. For example, the second search keyword may be input immediately after the preset character. For another example, the second search keyword may be input after a preset character and after a space character is separated from the preset character. For another example, the second search keyword may be input next to the preset character.

According to the method for acquiring the search instruction in the second method, the search instruction can be generated by directly inputting the search keyword after the preset character is input by the user, so that the component to be searched is acquired, and convenience is provided for the user to acquire the information of the component.

In the present embodiment, the above two acquisition methods are exemplarily illustrated with reference to fig. 5A, and the user may input a left angle bracket "<" in the code editing area 50 of the electronic device, and display a search input box at the third area 5012. There are two input modes for searching keywords: one is to enter a search keyword after the left angle bracket "<" of the code editing page 50; the other is to enter a search keyword in the search input box 5013. It should be noted here that the input of the search keyword after the left angle bracket "<" is usually an english alphabet combination, and the input of the search keyword in the search input box is usually a chinese character combination. However, the present application is not limited thereto.

S2012, the electronic equipment displays information of at least one candidate component corresponding to the search keyword in the code editing area.

Illustratively, referring to fig. 5A, taking a calendar component as an example, when the search keyword is a calendar, a development environment is detected, and information of a component related to the calendar displayed in the development environment in the related display interface may include: component XX: author XXX, applicable development environment. In fig. 5A is shown the display of information of components a-E in a first area 5011 and the display of related prompt content in a second area 5012 in a first interface 501 on a code editing area 50; the prompt content may be that the development environment is detected to be VUE as shown in fig. 5A, and the following "calendar related component" is recommended for you. Of course, the content of the prompt may be changed according to the user's needs and experience, and is not limited here. It should be noted that fig. 5A only shows one display manner of the first interface 501 and the code editing area 50; the first interface 501 may be a sub-interface of the code editing area 50, or may be a separate interface, which is not limited in any way by the embodiment of the present disclosure.

In another example, when the interface size of the first area 5011 is insufficient to display information of all components, a page turning function is added. For example, a control of adding a previous page and a control of adding a next page in the first area 5011 as shown in fig. 5B; viewed by clicking on control 5B1 of the previous page and control 5B2 of the next page; in the case that the current page is the home page, the control of the previous page may be displayed in gray. Similarly, in the case where the current page is the end page, the space of the next page may be displayed in gray. As another example, a scroll bar 5C1 may be added to the right side of the first area as shown in FIG. 5C, so that the user can view all of the components up and down by sliding the scroll control 5C1 in the scroll bar.

S2013, the electronic equipment responds to click operation in the information of at least one candidate component, and a target candidate component is determined; the target candidate component is one of the at least one candidate component.

For example, as shown in fig. 5A, when the user views the information of the displayed component, and the user needs the component G, the user can select the component G by clicking the component G with a mouse.

For example, the triggering operation on the target candidate component may be a click operation; the click operation may be any feasible operation such as a single click operation, a double click operation, a sliding operation, and the like, and may be determined according to actual requirements, and the embodiment of the present disclosure is not limited specifically. In addition, the selection operation and other trigger operations according to the embodiments of the present disclosure refer to the description of the click operation described above.

In the technical scheme provided by the embodiment of the disclosure, the information of the selectable one or more candidate components is visually displayed for the user through the response of the search instruction of the search keyword, so that the user directly selects the required components according to the information of the candidate components. The information of the related components does not need to be inquired and acquired from the browser, convenience is provided for a user to compile codes of the components, the time for compiling the codes is saved, and the programming efficiency is improved.

In one implementation manner, referring to fig. 6 in combination with fig. 2, the method for displaying component information provided by the embodiment of the present disclosure further includes S203 and S204.

S203, the electronic device responds to the trigger operation of the target candidate component, and obtains a data packet of the target candidate component and a dependent data packet of the candidate component.

In particular, the dependency package contains an environment file for running the selected target candidate component. After the user selects the target candidate component, the electronic device obtains a dependency data packet of the target candidate component. On this basis, if the code needs to be used, the address of the code (i.e., the dependency package) needs to be found in the repository, and then the code is downloaded and run in the program code of the application.

It should be noted that the dependency package in the embodiments of the present disclosure may also be referred to as a "plug-in".

S204, the electronic equipment installs the data packet of the target candidate component and the dependent data packet, and imports the data packet of the target candidate component.

Optionally, the target candidate component is introduced in the code editing area using an import statement.

When the dependent package of the target candidate component is installed, the installed dependent packages in the file are compared, and when the dependent packages are the same, the dependent packages are merged.

In the implementation manner, the data packet of the target candidate component and the dependent data packet of the candidate component can be directly acquired and installed through the triggering operation on the target candidate component in the displayed at least one candidate component. The method provides convenience for programmers in the process of writing codes and saves the code writing time.

In one implementation manner, referring to fig. 6, the method for displaying component information provided by the embodiment of the present disclosure further includes S205-S207.

S205, the electronic equipment displays the configuration button of the target candidate component.

S206, the electronic equipment responds to the trigger operation of the configuration button and displays at least one configuration control; each configuration control corresponds to a function.

S207, the electronic equipment responds to the selection operation of the at least one target configuration control and displays the information of the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.

For better understanding, referring to FIG. 7, an exemplary illustration is made with respect to S205-S206, a configuration control 701 (such as an info button 701 shown in FIG. 7) is presented in the upper right corner of the label of the target candidate component of the code editing area 50. A programmer clicks (i.e., triggers) the info button 701 with a tool such as a mouse to display at least one configuration control corresponding to the target candidate component (e.g., a display lunar calendar corresponding switch control 7011, a default display corresponding switch control 7012, and a display festival corresponding switch control 7013 shown in fig. 7). The programmer clicks the switch control (i.e., selects the switch control) through a tool such as a mouse, and displays the state of the corresponding switch control (the state is on or off).

In the implementation manner, by responding to the triggering operation of the user on the displayed configuration control, the information of one or more selectable configurations is/are visually displayed for the user, so that the user directly selects the required configuration according to the information of the candidate component. The information of relevant configuration does not need to be inquired and obtained from the browser, convenience is provided for a user to compile configuration codes of the components, the time for compiling the codes is saved, and the programming efficiency is improved.

Further, referring to fig. 6, after the electronic device in S207 responds to the selection operation of the at least one target configuration control, the method further includes the following steps:

s2071, the electronic device closes the selection operation of the first selected target configuration control when determining that the function of the first selected target configuration control and the function of the second selected target configuration control are mutually exclusive.

S2072, the electronic equipment generates and displays the prompt message; the prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

Specifically, as shown in fig. 7, it is assumed that displaying the lunar calendar (i.e., displaying the lunar calendar with the switch state "on") cannot simultaneously display the switches (i.e., displaying the holiday with the switch state "on"); the function of displaying the lunar calendar and the function of displaying the switch are considered to be mutually exclusive. If the selected display switch is selected after the selected lunar calendar, the function of displaying the lunar calendar is turned off by default, and "ps: when the festival is displayed as future, the prompt information of unavailable lunar calendar is displayed

According to the embodiment of the disclosure, under the condition that the functions corresponding to the two selected target configuration controls are determined to have conflict, the previously selected functions are closed, and a prompt message indicating that the conflict exists between the functions selected by a user is prompted. Therefore, not only can the conflict attribute be avoided, but also potential bugs can be reduced; and the use experience of the user can be improved.

Fig. 8 is a schematic structural diagram of a device for displaying component information according to an embodiment of the present disclosure. Applied to a terminal, wherein the display device 80 of the component information comprises: an acquisition unit 801, a display unit 802, and a processing unit 803. Wherein:

the processing unit 803 is configured to determine the target candidate component in response to a trigger operation on the information of the target candidate component in the code editing area. For example, as shown in connection with fig. 2, the processing unit 803 may be configured to execute S201.

A display unit 802 configured to display the target candidate component of the processing unit 803 in the code editing area. For example, as shown in connection with fig. 2, the obtaining unit 801 may be configured to perform S202.

In an exemplary scheme, the obtaining unit 801 is specifically configured to, in response to a search instruction for a search keyword input in the code editing area, obtain information of at least one candidate component corresponding to the search keyword. For example, as shown in connection with fig. 4, the obtaining unit 801 may be configured to execute S2011.

A display unit 802 configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit 801 in the code editing area. For example, as shown in connection with fig. 4, the display unit 802 may be configured to perform S2012.

A processing unit 803. Is configured to determine a target candidate component in response to a click operation in the information of at least one candidate component displayed in the display unit 802; the target candidate component is one of the at least one candidate component. For example, as shown in connection with fig. 4, the processing unit 803 may be configured to execute S2013.

In an exemplary scheme, the obtaining unit 801 is further configured to obtain a data packet of the target candidate component and a dependent data packet of the candidate component in response to a triggering operation on the target candidate component.

A processing unit 803 configured to install the packet of the target candidate component and the dependent packet acquired by the acquisition unit 801 and import the packet of the target candidate component.

In an exemplary aspect, the display unit 802 is further configured to: configuration buttons for the target candidate components are displayed. Responding to the triggering operation of the configuration button, and displaying at least one configuration control; each configuration control corresponds to a function. Responding to the selection operation of at least one target configuration control, and displaying the information of the function corresponding to the target configuration control; the target configuration control is one of the at least one configuration control.

In an exemplary scheme, the processing unit 803 is further configured to, in a case that it is determined that the function of the target configuration control selected first and the function of the target configuration control selected later are mutually exclusive, close the selection operation on the target configuration control selected first.

A processing unit 803 further configured to generate a prompt message; the prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

The display unit 802 is configured to display the prompt information generated by the processing unit 803.

In an exemplary scheme, the obtaining unit 801 is specifically configured to receive a preset character input by a user at a preset position of the code editing area.

The display unit 802 is configured to display the search input box after the acquisition unit 801 receives the preset character.

An acquisition unit 801 further configured to receive a first search keyword input by a user in a search input box; the search keyword is a first search keyword.

The processing unit 803 is configured to generate a search instruction according to the search keyword received by the acquisition unit 801.

In an exemplary scheme, the obtaining unit 801 is specifically configured to receive a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character; the search keyword is a second search keyword.

A processing unit 803 configured to generate a search instruction according to the second search keyword received by the acquisition unit 801.

In an exemplary scheme, the processing unit 803 is further configured to determine, in response to a search instruction for a search keyword, a technology stack corresponding to a current editing position in the code editing area.

The processing unit 803 is further configured to search the database corresponding to the technology stack for information of at least one candidate component corresponding to the search keyword.

A display unit 802 configured to display information of the at least one candidate component searched by the processing unit 803.

In an exemplary scenario, the obtaining unit 801 is specifically configured to obtain the label of the target candidate component.

A display unit 802 configured to display the tags of the target candidate components acquired by the acquisition unit 801 in the code editing area.

Of course, the component information display device 80 provided by the embodiment of the present disclosure includes, but is not limited to, the above units, for example, the component information display device 80 may further include the storage unit 804. The storage unit 804 may be used for storing the program code of the component information presentation apparatus 80, and may also be used for storing data generated by the component information presentation apparatus 80 during operation, such as data in a write request.

In addition, the embodiment of the present disclosure also provides a computer-readable storage medium, which includes instructions, when executed by a processor, causing the processor to execute the method for displaying component information provided in the above embodiment; alternatively, the instructions, when executed by the processor, cause the processor to perform the method of presenting component information as provided in the above embodiments.

In addition, the embodiment of the present disclosure further provides a computer program product, which includes instructions, and when the instructions are executed by a processor, the instructions cause the processor to execute the method for displaying component information provided in the foregoing embodiment; alternatively, the instructions, when executed by the processor, cause the processor to perform the method of presenting component information as provided in the above embodiments.

In an exemplary embodiment, the present disclosure further provides a system for displaying component information, including a terminal and a server, where the terminal is configured to execute a function of the terminal in the method for displaying component information in the foregoing embodiment, and the server is configured to execute a function of the server in the method for displaying component information in the foregoing embodiment, and the same technical effect can be achieved, and in order to avoid repetition, details are not repeated here.

Other embodiments of the disclosed embodiments will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. The disclosed embodiments are intended to cover any variations, uses, or adaptations of the disclosed embodiments that follow its general principles and include common general knowledge in the art or routine and practice in the art without disclosure of the disclosed embodiments. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosed embodiments being indicated by the following claims.

Claims

1. The method for displaying the component information is applied to a code editor, and comprises the following steps:

determining a target candidate component in response to a trigger operation on information of the target candidate component in the code editing area;

displaying the target candidate component in the code editing area.

2. The method for presenting the component information according to claim 1, wherein the determining the target candidate component in response to the triggering operation on the information of the target candidate component in the code editing area comprises:

responding to a search instruction aiming at a search keyword input in the code editing area, and acquiring information of at least one candidate component corresponding to the search keyword;

displaying information of at least one candidate component corresponding to the search keyword in the code editing area;

determining the target candidate component in response to a click operation in the information of the at least one candidate component; the target candidate component is one of the at least one candidate component.

3. The method for displaying component information according to claim 2, further comprising:

responding to a trigger operation of the target candidate component, and acquiring a data packet of the target candidate component and a dependent data packet of the candidate component;

and installing the data packet of the target candidate component and the dependent data packet, and importing the data packet of the target candidate component.

4. The method for displaying component information according to claim 3, wherein the method further comprises:

displaying a configuration button of the target candidate component;

responding to the triggering operation of the configuration button, and displaying at least one configuration control; each configuration control corresponds to a function;

responding to the selection operation of at least one target configuration control, and displaying the information of the function corresponding to the target configuration control; the target configuration control is one of the at least one configuration control.

5. The method for presenting component information according to claim 4, wherein the responding to the selection operation of the at least one target configuration control further comprises:

under the condition that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, closing the selection operation of the first selected target configuration control;

generating and displaying prompt information; the prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

6. The method for displaying component information according to claim 2, wherein the method for acquiring the search instruction includes:

receiving preset characters input by a user at a preset position of the code editing area, and displaying a search input box;

receiving a first search keyword input in the search input box by a user, and generating the search instruction; the search keyword is the first search keyword.

7. A device for displaying component information, comprising:

a processing unit configured to determine a target candidate component in response to a trigger operation on information of the target candidate component in the code editing area;

a display unit configured to display the target candidate component of the processing unit in the code editing region.

8. An electronic device, comprising:

a processor;

a memory for storing the processor-executable instructions;

wherein the processor is configured to execute the instructions to implement the method of presenting component information according to any one of claims 1-6.

9. A computer-readable storage medium comprising instructions that, when executed by a processor in an electronic device, cause the electronic device to perform the method of presenting component information of any of claims 1-6.

10. A computer program product comprising a computer program, characterized in that the computer program, when executed by a processor in an electronic device, causes the electronic device to perform the method of presenting component information according to any of claims 1-6.