A method and apparatus for combining ordering components

Abstract

The application relates to the technical field of Web front-end development, and particularly provides a method and device for combining and sorting components, which have the following steps: S1, defining component structure and style; S2, defining a single sorting item component data structure; S3, defining a sorting group container component data structure; and S4, defining a component communication mechanism. Compared with the prior art, the application can greatly save the time of developers for repeatedly developing components, improve the development efficiency, and has good expansibility because the user can modify the default style of the component according to the product style.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Web front-end development, and specifically provides a method and device for combining and sorting components. BACKGROUND

[0002] Vue is a JavaScript framework for building user interfaces, which is built based on standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model. Vue3 is the latest version of the framework, which has significantly improved performance through source code upgrades, such as using Proxy instead of defineProperty to implement responsiveness, rewriting the implementation of virtual DOM and Tree-Shaking, etc. The application package size and memory usage are reduced by nearly 50%, the initial rendering speed of the application is increased by about 50%, and the update rendering speed is doubled.

[0003] The specific content of the front-end componentization concept is to separate a part of the page (such as buttons, forms, dialog boxes, etc.), encapsulate the model layer (Model), view layer (View) and view model layer (ViewModel) of this part into a component, and expose some functions and properties for external calls. Componentization focuses more on the UI part, and each component has independent HTML, CSS, JS / TS code. It can be placed anywhere on the page as needed, or it can form a new component with other components. A page is a combination of components, which can be assembled as needed. The biggest purpose of componentization is to increase the reusability of code, reduce the coupling of various functions of the system, improve the aggregation of internal functions, facilitate the division of labor and synchronous development among developers, and ultimately improve development efficiency and reduce development cost. Componentization has become the mainstream trend of front-end frameworks, and mature frameworks such as Vue, React and Angular already have excellent componentization mechanisms.

[0004] Front-end component communication, i.e. data exchange and state synchronization between components, is an indispensable mechanism in component development, which solves core problems such as data sharing, decoupling and reuse, dynamic interaction, and state management between components. Its principle is mainly based on the concept of data flow, which can be unidirectional or bidirectional. Unidirectional data flow is usually from parent components to child components, while bidirectional data flow supports bidirectional data transmission between parent and child components.

[0005] The UI component library is a set of encapsulated UI components, which provides a rich set of encapsulated and reusable UI components, such as icons, buttons, selection boxes, input boxes, forms and other small elements that constitute the interface. For engineering projects with low customization and personalization, using component libraries for rapid development has become a common strategy for enterprises. However, the current mainstream component libraries, such as Ant Design, ElementPlus, NG-ZORRO, etc. do not implement sorting components. For the requirement of ascending / descending order sorting display according to different classification items, developers usually need to spend some time to develop sorting components. SUMMARY

[0006] The present application is aimed at the deficiencies of the prior art, and provides a practical method of combined sorting component.

[0007] The further technical task of the present application is to provide a device of combined sorting component with reasonable design and safety.

[0008] The technical solution adopted by the present application to solve its technical problems is:

[0009] A method of combined sorting component, comprising the following steps:

[0010] S1, define component structure and style;

[0011] S2, define single sorting item component data structure;

[0012] S3, define sorting group container component data structure;

[0013] S4, define component communication mechanism.

[0014] Further, in step S1, two components WSortGroup.vue and WSort.vue are generated, the WSortGroup.vue is a sorting group container component, and the WSort.vue is a sorting item component, and the entire combined sorting component is composed of the sorting group container component and the sorting item component.

[0015] Further, the WSort.vue component defines the page content structure and style of a single sorting item, that is, composed of sorting field text identification and ascending / descending identification icons, and uses w-sort, w-sort-label, w-sort-icon and w-sort-icon-active classes to define the style of a single sorting item;

[0016] The w-sort class is used as the top-level style of the sorting item, which defines the size, inner and outer margin of the sorting item, and the page arrangement position of the sorting field text and the sorting identification icon;

[0017] The w-sort-label class defines the size and color of the sorting field text;

[0018] The w-sort-icon class defines the size, color, and position of the sorting identification icon;

[0019] The w-sort-icon-active class defines the active style of the sorting identification icon in the current sorting state.

[0020] Further, the WSortGroup.vue component serves as a parent component containing several WSort.vue components, which uses the slot mechanism in Vue3 to receive custom sorting groups, has no additional page element content, and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items in the container.

[0021] Further, in step S2, the sorting item component contains type, asc, desc, isActive, and toggleValueAndType;

[0022] The type field is an identification field for the sorting method of the sorting item, indicating how the sorting item is sorted;

[0023] The asc field is an ascending sorting identification field for the sorting item;

[0024] The desc field is a descending sorting identification field for the sorting item;

[0025] The isActive field is an identification of the active state of the sorting item. When there are multiple sorting items in the sorting component, this field takes effect. When there is only one sorting item, the value of this field should always be true;

[0026] The toggleValueAndType attribute is an internal listening event for the sorting item. When the sorting click event occurs, this event is triggered to pass the relevant sorting information to the parent component WSortGroup.vue;

[0027] Among them, the type, asc, and desc fields are configuration item fields, which are exposed attributes of the sorting item component, used for initialization configuration by other components that reference the sorting item component.

[0028] Further, in step S3, the sorting group container component contains defalutType, defaultValue, onSort, sortType, and sortValue;

[0029] The defaultType field serves as the default sorting method identifier for the combined sorting component and is used to reference the initial value of the combined sorting component.

[0030] The defaultValue field serves as the default sorting type identifier field for the combined sorting component, and is used to reference the initial value set in the component settings of the combined sorting component.

[0031] The onSort field is a method field for retrieving backend data items. It is used to reference the callback method of the component setting sorting event of the combined sorting component. When the sorting method changes, this method for retrieving backend data items is called.

[0032] The sortType field serves as an identifier for the current sorting method;

[0033] The sortValue field serves as an identifier for the current sorting type.

[0034] Furthermore, in step S4, during the use of the combined sorting component, two data flow directions will occur: data is passed from the parent component to the child component and data is passed from the child component to the parent component.

[0035] Furthermore, depending on the different communicating parties, there are four types of inter-component communication;

[0036] The first instance is when the referencer of the combined sorting component passes the initialization configuration field to the sorting group container component;

[0037] The second instance is where the referencer of the combined sorting component passes the initialization configuration field to the sorting item component;

[0038] The third part is the sorting group container component, which initializes the sorting item component based on the default sorting configuration passed by the referencer, and then manages the unified state of each sorting item.

[0039] The fourth is when a user clicks on a sorting item component, triggering a sorting event, the sorting item component passes the corresponding sorting information to the sorting group container component;

[0040] The first three communication scenarios all involve communication from the parent component to the child component, while the fourth communication scenario involves communication from the child component to the parent component.

[0041] Furthermore, based on the first to fourth communication scenarios, the following communication mechanisms are defined:

[0042] The props mechanism ensures that references to the composite sorting component pass initialization configuration fields to the sorting group container component and to the sorting item component.

[0043] A dependency injection mechanism is used to ensure that the sorting group container component initializes the sorting item component.

[0044] The emits mechanism is used to ensure that sorting item components pass the corresponding sorting information to the sorting group container component.

[0045] An apparatus for combining sorting components includes: at least one memory and at least one processor;

[0046] The at least one memory is used to store a machine-readable program;

[0047] The at least one processor is configured to invoke the machine-readable program to execute a method for combining sorting components.

[0048] Compared with the prior art, the method and apparatus for combining sorting components of the present invention have the following outstanding advantages:

[0049] This invention fills a gap in existing UI component libraries. Since existing UI component libraries lack implementations of combinable sorting components, this invention has the opportunity to fill this gap. It provides great convenience and valuable reference for developers seeking this functionality or design. Furthermore, it offers clear guidance for front-end projects based on frameworks such as React and Angular that require the development of combinable sorting components.

[0050] To address user needs, this invention provides a good solution for displaying multiple data items in different orders using combined sorting in many application scenarios.

[0051] This invention provides out-of-the-box components that are easy to quickly integrate and use in Vue 3 projects, improving development efficiency. Furthermore, it supports secondary development to meet personalized needs. Attached Figure Description

[0052] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0053] Appendix Figure 1 This is a flowchart illustrating a method for combining sorting components;

[0054] Appendix Figure 2 This is a structural diagram of a method for combining sorting components;

[0055] Appendix Figure 3 This is a schematic diagram of the communication process in a method of combining sorting components. Detailed Implementation

[0056] To enable those skilled in the art to better understand the present invention, the present invention will be further described in detail below with reference to specific embodiments. Obviously, the described embodiments are merely some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0057] The following is a preferred embodiment:

[0058] like Figure 1 As shown, this embodiment presents a method for combining sorting components, implemented based on the Vue3 framework. It adopts Vue3's syntax rules and communication mechanism, but the implementation approach can be applied to frameworks such as Vue2, React, and Angular. The method includes the following steps:

[0059] S1. Define the component structure and style;

[0060] like Figure 2 As shown, this generates two components: WSortGroup.vue and WSort.vue. WSort.vue is the sorting item component, and WSortGroup.vue is the sorting group container component. The entire combined sorting component consists of the sorting group container component and the sorting item component.

[0061] The WSort.vue component defines the page content structure and style of a single sorting item, which consists of a sorting field text label and ascending / descending order icons. The styles of a single sorting item are defined using classes such as w-sort, w-sort-label, w-sort-icon, and w-sort-icon-active.

[0062] The w-sort class, as the top-level style for sorting items, defines the size, margins, and page layout of the sorting field text and sorting icon.

[0063] The w-sort-label class defines the size, color, etc. of the text in the sorting field;

[0064] The w-sort-icon class defines the size, color, position, etc. of the sorting icon;

[0065] The w-sort-icon-active class defines the activation style of the sorting icon in the current sorting state, such as its color.

[0066] The WSortGroup.vue component serves as the parent component that contains several WSort.vue components. It primarily utilizes the slot mechanism in Vue 3 to receive custom sorting groups. It does not contain any additional page elements and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items within the container.

[0067] This application provides a default style, and users can also adjust the style according to their own project style by setting a custom style class to set the target style.

[0068] S2. Define the data structure for a single sorting item (i.e., the WSort.vue component);

[0069] The sorting item component mainly includes attributes such as type, asc, desc, isActive, and toggleValueAndType;

[0070] The type field serves as an identifier for the sorting method of this sorting item, indicating how this sorting item is sorted.

[0071] The asc field serves as the ascending sort identifier for this sorting item;

[0072] The desc field serves as a sorting identifier for this sorting item in descending order.

[0073] The isActive field serves as an indicator of the active status of the sorting item. This field takes effect when there are multiple sorting items in the sorting component, and its value should always be true when there is only one sorting item.

[0074] The toggleValueAndType property serves as an internal event listener for this sorting item. This event is triggered when a sorting click event occurs, passing the relevant sorting information to the parent component WSortGroup.vue.

[0075] Among them, fields such as type, asc, and desc are configuration fields, which are properties exposed by the sorting item component and are used to reference other components of this component for initialization configuration.

[0076] S3. Define the data structure of the sorting group container component (i.e., the WSortGroup.vue component);

[0077] The sorting group container component mainly includes properties such as defaultType, defaultValue, onSort, sortType, and sortValue.

[0078] The `defaultType` field serves as the default sorting method identifier for the combined sorting component, and is used to reference the initial value of this combined sorting component.

[0079] The defaultValue field serves as an identifier for the default sorting type (ascending / descending) of the combined sorting component, and is used to reference the initial value set by this combined sorting component.

[0080] The onSort field is the method field for retrieving backend data items. It is used to reference the callback method of the component that sets the sorting event for this combined sorting component. This method is called when the sorting method changes.

[0081] The sortType field serves as an identifier for the current sorting method.

[0082] The sortValue field serves as an identifier for the current sorting type.

[0083] Among them, fields such as defaultType, defaultValue, and onSort are configuration fields, which are properties exposed by the sorting group container component and are used to reference other components of this component for initialization configuration.

[0084] S4. Define the communication mechanism between components;

[0085] like Figure 3 As shown, during the use of the combined sorting component, there are two data flow directions: data is passed from the parent component to the child component and data is passed from the child component to the parent component.

[0086] There are four types of inter-component communication depending on the two communicating parties;

[0087] The first instance is when the referencer of the combined sorting component passes initialization configuration fields to the sorting group container component, namely fields such as default sorting method, default sorting type, and sorting callback method.

[0088] The second instance is when the user of the combined sorting component passes initialization configuration fields to the sorting item component, namely, sorting item identifier, ascending sort identifier, descending sort identifier, etc.

[0089] The third part is that the sorting group container component initializes the sorting item component according to the default sorting configuration passed by the referencer, including the relevant sorting activation state style, as well as the unified state management of each sorting item in the future.

[0090] The fourth point is when a user clicks on a sorting item component, triggering a sorting event. In this case, the sorting item component passes the corresponding sorting information, such as sorting method and sorting type, to the sorting group container component.

[0091] The first three communication scenarios all involve communication from the parent component to the child component, while the fourth communication scenario involves communication from the child component to the parent component.

[0092] Based on the above analysis, the following communication mechanisms are defined for the four communication scenarios mentioned above:

[0093] The props mechanism of Vue3 is used to ensure that the referencer of the composite sorting component passes the initialization configuration field to the sorting group container component and to the sorting item component.

[0094] Vue 3's dependency injection mechanism is used to ensure that the sorting group container component initializes the sorting item component;

[0095] The Vue 3 emits mechanism is used to ensure that the sorted item component passes the corresponding sorting information to the sorted group container component.

[0096] Based on the above method, an apparatus for a combined sorting component in this embodiment includes: at least one memory and at least one processor;

[0097] The at least one memory is used to store a machine-readable program;

[0098] The at least one processor is configured to invoke the machine-readable program to execute a method for combining sorting components.

[0099] The above-described specific embodiments are merely specific examples of the present invention. The patent protection scope of the present invention includes, but is not limited to, the above-described specific embodiments. Any technical solution that conforms to the above-described specific embodiments of the present invention and any appropriate changes or substitutions made by those skilled in the art should fall within the patent protection scope of the present invention.

[0100] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for combining sorting components, characterized in that, It has the following steps: S1. Define the component structure and style; Generate two components, WSortGroup.vue and WSort.vue. WSortGroup.vue is the sorting group container component, and WSort.vue is the sorting item component. The entire combined sorting component consists of the sorting group container component and the sorting item component. S2. Define the data structure for a single sorting item component; The sorting item component includes type, asc, desc, isActive, and toggleValueAndType; The type field serves as an identifier for the sorting method of the sorting items, indicating how the sorting items are sorted. The asc field serves as the ascending sort identifier field for the sorting item. The desc field serves as a descending sorting identifier field for the sorting item. The isActive field serves as an identifier for the activation status of a sorting item. This field takes effect when there are multiple sorting items in the sorting component, and its value should always be true when there is only one sorting item. The toggleValueAndType property serves as an internal listener event for the sorting item. This event is triggered when a sorting click event occurs, passing the relevant sorting information to the parent component WSortGroup.vue. Among them, the type, asc, and desc fields are configuration fields, which are properties exposed by the sorting item component and are used to reference other components of the sorting item component for initialization configuration; S3. Define the data structure of the sorting group container component; The sorting group container component includes defaultType, defaultValue, onSort, sortType, and sortValue; The defaultType field serves as the default sorting method identifier for the combined sorting component and is used to reference the initial value of the combined sorting component's settings. The defaultValue field serves as the default sorting type identifier field for the combined sorting component, and is used to reference the initial value set in the component settings of the combined sorting component. The onSort field is a method field for retrieving backend data items. It is used to reference the callback method of the component setting sorting event of the combined sorting component. When the sorting method changes, this method for retrieving backend data items is called. The sortType field serves as an identifier for the current sorting method; The sortValue field serves as an identifier for the current sorting type. S4. Define the communication mechanism between components; The following communication mechanisms are defined: The props mechanism ensures that references to the composite sorting component pass initialization configuration fields to the sorting group container component and to the sorting item component. A dependency injection mechanism is used to ensure that the sorting group container component initializes the sorting item component. The emits mechanism is used to ensure that sorting item components pass the corresponding sorting information to the sorting group container component.

2. The method for combining sorting components according to claim 1, characterized in that, The WSort.vue component defines the page content structure and style of a single sorting item, which consists of a sorting field text label and ascending and descending order icons. The w-sort, w-sort-label, w-sort-icon, and w-sort-icon-active classes are used to define the style of a single sorting item. The w-sort class, as the top-level style for sorting items, defines the size, margins, and page layout of the sorting field text and sorting icon. The w-sort-label class defines the size and color of the text in the sorting field; The w-sort-icon class defines the size, color, and position of the sorting icon; The w-sort-icon-active class defines the activation style of the sorting icon in the current sorting state.

3. The method for combining sorting components according to claim 2, characterized in that, The WSortGroup.vue component serves as the parent component that contains several WSort.vue components. It utilizes the slot mechanism in Vue3 to receive custom sorting groups, has no additional page element content, and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items within the container.

4. The method for combining sorting components according to claim 3, characterized in that, In step S4, during the use of the combined sorting component, two data flow directions will occur: data is passed from the parent component to the child component and data is passed from the child component to the parent component.

5. The method for combining sorting components according to claim 4, characterized in that, There are four types of inter-component communication depending on the two communicating parties; The first instance is when the referencer of the combined sorting component passes the initialization configuration field to the sorting group container component; The second instance is where the referencer of the combined sorting component passes the initialization configuration field to the sorting item component; The third part is the sorting group container component, which initializes the sorting item component based on the default sorting configuration passed by the referencer, and then manages the unified state of each sorting item. The fourth is when a user clicks on a sorting item component, triggering a sorting event, the sorting item component passes the corresponding sorting information to the sorting group container component; The first three communication scenarios all involve communication from the parent component to the child component, while the fourth communication scenario involves communication from the child component to the parent component.

6. An apparatus for combining sorting components, characterized in that, include: At least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to invoke the machine-readable program to perform the method according to any one of claims 1 to 5.

Images