Prompt information component optimization method and device, and storage medium

Abstract

The invention relates to the field of front-end page display, and discloses a prompt information component optimization method and device and a storage medium, and the method comprises the following steps: creating a user-defined display component; obtaining display main body information and prompt information by utilizing the user-defined display component; creating an interactive mapping relationship between the mouse action and the prompt sign; according to the interaction mapping relation, judging whether to call a user-defined display component or not; after the user-defined display component is called, whether the prompt information is displayed or not is judged according to the width of the main body information and the width of the prompt information. According to the method, the display and implicit switching can be carried out in real time along with the change of the viewport in the response type layout, and the user experience is well optimized and improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end page display, and in particular to a method for optimizing a prompt information component. Background Art

[0002] There are now many demands for various built-in hover prompts for software products. The existing tooltip component of Element-ui (Element, a desktop component library based on Vue 2.0 for developers, designers and product managers) can display the corresponding prompt information according to the configured display direction by mouse (hover / click), and supports custom display content. However, the use of this open source UI framework in some product definitions is naturally not comprehensive.

[0003] The existing tooltip component is a user interface element, usually used to provide brief information, descriptions, tips or help text to explain the function of an element or provide additional contextual information. When used in conjunction with slots, the prompt information can be bound to the display subject to complete the display of the prompt information according to the corresponding interaction requirements.

[0004] However, in actual scenario requirements, when all information can be fully viewed in the visible content area, the tooltip prompt information is actually unnecessary for users, and it is hoped that under the premise of responsive layout of the interface, the visible area of ​​the main information will change accordingly with the change of the viewport. This causes the prompt information display rules to change in real time, and in this case, the tooltip cannot meet the implementation of product requirements. Summary of the invention

[0005] The purpose of the present invention is to propose an optimization method for a prompt information component to solve the technical problem that the display component in the prior art cannot effectively meet the relevant requirements in the actual process and the design is relatively rigid.

[0006] A method for optimizing a prompt information component comprises the following steps:

[0007] S1. Create a custom display component;

[0008] S2. Obtain display subject information and prompt information using a custom display component;

[0009] S3, creating an interactive mapping relationship between mouse actions and prompt signs;

[0010] S4. Determine whether to call a custom display component according to the interactive mapping relationship;

[0011] S5. After the custom display component is called, it is determined whether to display the prompt information according to the width of the main information and the prompt information.

[0012] A storage medium stores instructions and data for implementing a method for optimizing a prompt information component.

[0013] A prompt information component optimization device comprises: a processor and the storage medium; the processor loads and executes instructions and data in the storage medium to implement a prompt information component optimization method.

[0014] The beneficial effects provided by the present invention are: compared with the existing technical solutions, the main information can be fully viewed without displaying the prompt information, and it also has good compatibility in the use of other components of element-ui, for example, it can be combined with the table component to display and hide prompts for a single data, and it can also solve the problem that the tooltip content of the table is always displayed interactively. In addition, it can switch between display and hiding in real time in a responsive layout following the changes of the viewport, which has a good optimization and improvement on the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 It is a schematic flow chart of the method of the present invention;

[0016] Figure 2 It is the display effect before optimization by the method of the present invention;

[0017] Figure 3 This is the display effect after optimization by the method of the present invention;

[0018] Figure 4 It is a working schematic diagram of the hardware device of the present invention. DETAILED DESCRIPTION

[0019] To make the objectives, technical solutions and advantages of the present invention more clear, the embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0020] Before formally describing the present invention, the scheme of the present invention is first generally described for easy understanding.

[0021] Please refer to Figure 1 , Figure 1 It is a schematic flow diagram of the method of the present invention;

[0022] The present invention provides a method for optimizing a prompt information component, comprising the following steps:

[0023] S1. Create a custom display component;

[0024] It should be noted that the custom component includes: the direction of the prompt message display, whether to display the prompt message, the prompt message displayed by the component, the display style, the mouse over event, the mouse out event, and the main information to be displayed.

[0025] Among them, whether to display the prompt message further includes visible prompt message elements and invisible prompt message elements. When the prompt message is displayed, the visible prompt message elements are called, and when the prompt message is not displayed, the invisible prompt message elements are called.

[0026] As an example, some of the code for the custom display component of the present invention is as follows for reference:

[0027] <el-tooltips placement='the direction of the prompt message display':disable='whether to display the prompt message'>

[0028] <div slot＝'content'> Prompt information displayed by the component

[0029] <div class＝'定义样式类名'@mouseenter＝'鼠标移入事件'@mouseleave＝'鼠标移除事件'> <slot> Displayed main information< / slot>

[0030]

[0031] S2. Use the custom display component to obtain the main information to be displayed and the prompt message;

[0032] It should be noted that according to the specific operations in the above step S1, the present invention obtains the main information (label) and the prompt message (tips) to be currently displayed through the custom component (named: props).

[0033] As an example, the element data of the main information of the interface is obtained through document.querySelectorAll as follows: const elList = document.querySelectorAll('the name of the main information style').

[0034] As an example, an element is created through document.createElement() and the prompt message is placed in the created element as follows:

[0035] const div = document.createElement('div');

[0036] div.className = the name of the prompt message style;

[0037] div.innerHTML = the content of the prompt message;

[0038] In addition, it should be noted that the creation process for the invisible prompt message elements is as follows:

[0039] div.style.position='fixed';

[0040] div.style.opacity=0;

[0041] After creation, put the element into the interface to hide and display it, as follows:

[0042] document.body.appendChild(div);

[0043] S3, creating an interactive mapping relationship between mouse actions and prompt signs;

[0044] According to the definition of the custom display component in step S1, the present invention introduces a prompt flag isShowTooltip to determine whether to call the custom component.

[0045] In step S3, the interactive mapping relationship is specifically: when the mouse moves into the main information display area, the prompt mark is activated, and in other cases the prompt mark is invalid.

[0046] S4. Determine whether to call a custom display component according to the interactive mapping relationship;

[0047] In step S4: when the prompt mark is activated, the custom display component is called.

[0048] S5. After the custom display component is called, it is determined whether to display the prompt information according to the width of the main information and the prompt information.

[0049] In step S5, the custom display component is called using a node information flag.

[0050] It should be noted that when multiple custom components are introduced into the interface (for example, into the original component), it is necessary to ensure that the main information obtained is the one corresponding to the custom component. Therefore, in this application, elList (the data set of the main information) is obtained in a loop, and a nodeList that receives node information is defined to determine whether the interface uses a custom component. As an embodiment, some codes can be referred to as follows:

[0051] for(let i=0;i <elList.length;i++){

[0052] if(el[i].innerText===this.label){

[0053] this.nodeList = el[i]

[0054] }

[0055] }

[0056] After the above operations are completed, you need to obtain the element information of the prompt information:

[0057] const realLabel = document.querySelector('prompt information style name');

[0058] Specifically, the present invention determines whether to display the prompt information according to the prompt information width and the main information width. The following are some of the codes for reference:

[0059] if(this.nodeList){

[0060] / / Determine whether to display tooltip based on the width of the prompt information and the width of the main information

[0061] this.isShowTooltip=this.nodeList.offsetWidth>=realLabel.offsetWidth

[0062] }

[0063] When the mouse finally moves out, the created visual prompt information element is removed at the same time, as follows

[0064] const realLabel=document.querySelector('.realLabel');

[0065] document.body.removeChild(realLabel);

[0066] As an example, please refer to Figure 2 , Figure 2 This is the display effect before the optimization of the method of the present invention. It can be seen that when the main information is fully displayed or omitted, the tooltip prompt information display content will be displayed.

[0067] Please refer to Figure 3 , Figure 3 This is the display effect after optimization by the method of the present invention. It can be seen that when the main information is fully displayed, no prompt information will appear, and when the display is omitted, a tooltip prompt of the complete information will appear.

[0068] See also Figure 4 , Figure 4It is a schematic diagram of the working of the hardware device of an embodiment of the present invention, and the hardware device specifically includes: an optimization device 401 for prompt information components, a processor 402 and a storage medium 403.

[0069] An optimization device 401 for a prompt information component: The optimization device 401 for a prompt information component implements the optimization method for a prompt information component.

[0070] Processor 402: The processor 402 loads and executes the instructions and data in the storage medium 403 to implement the optimization method of the prompt information component.

[0071] Storage medium 403: the storage medium 403 stores instructions and data; the storage medium 403 is used to implement the optimization method of the prompt information component.

[0072] The beneficial effects of the present invention are as follows: compared with the existing technical solutions, the main information can be fully viewed without displaying the prompt information, and it also has good compatibility in the use of other components of element-ui, for example, it can be combined with the table component to display and hide prompts for a single data, and it can also solve the problem that the tooltip content of the table is always displayed interactively. In addition, it can switch between display and hiding in real time in a responsive layout following the changes in the viewport, which has a good optimization and improvement on the user experience.

[0073] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for optimizing a prompt information component, characterized in that: The following steps are involved: S1. Create a custom display component; S2. Obtain display subject information and prompt information using a custom display component; S3, creating an interactive mapping relationship between mouse actions and prompt signs; S4. Determine whether to call a custom display component according to the interactive mapping relationship; S5. After the custom display component is called, it is determined whether to display the prompt information according to the width of the main information and the prompt information.

2. The optimization method of a prompt information component according to claim 1, characterized in that: The custom component includes: a visible prompt information element and an invisible prompt information element.

3. The optimization method of a prompt information component according to claim 1, characterized in that: In step S3, the interactive mapping relationship is specifically: when the mouse moves into the main information display area, the prompt mark is activated, and in other cases the prompt mark is invalid.

4. The optimization method of a prompt information component according to claim 1, characterized in that: In step S4: when the prompt mark is activated, the custom display component is called.

5. The optimization method of a prompt information component according to claim 1, characterized in that: In step S5, when the width of the prompt information is greater than the width of the main information, a visible prompt information element is called, otherwise, an invisible prompt information element is called.

6. The optimization method of a prompt information component according to claim 1, characterized in that: In step S5, the custom display component is called using a node information flag.

7. A storage medium, characterized in that: The storage medium stores instructions and data for implementing a method for optimizing a prompt information component as described in any one of claims 1 to 6.

8. An optimization device for a prompt information component, characterized in that: include: A processor and a storage medium; the processor loads and executes instructions and data in the storage medium to implement a method for optimizing a prompt information component as described in any one of claims 1 to 6.

Images