Methods and systems for building draggable, personalized layout pages based on Vue.

Abstract

This invention provides a method, system, storage medium, and electronic device for building draggable personalized layout pages based on Vue, relating to the field of visual modeling technology. The invention includes: creating a Vue visual chart component and initializing its configuration; creating an ECharts chart container; adding front-end configuration attributes for the corresponding chart component name page; importing the chart component into a public configuration attribute page; importing the configured attribute page; uniformly exposing the option configuration attribute page of the registered component; registering and exposing the ECharts chart component; encapsulating the draggable component and passing in the component registration data; saving the large screen with all configured data; and simultaneously generating a large screen image using html2canvas and saving it locally. This allows users to easily configure the display format of their personal homepage content, enabling them to customize their workspace layout through drag-and-drop functionality.

Description

Technical Field

[0001] This invention relates to the field of visual modeling technology, specifically to a method, system, storage medium, and electronic device for constructing draggable personalized layout pages based on Vue.js. Background Technology

[0002] The website uses a dashboard to configure personalized homepages for each user based on their browsing behavior, click behavior, and resource preferences. This allows users to easily find the content they prefer, improving the user experience. The user's ability to customize their homepage depends on the dashboard settings.

[0003] Therefore, in order to achieve personalized display of system pages and make them implementable by non-professionals, it is necessary to design a visual, drag-and-drop custom page layout tool. Summary of the Invention

[0004] (a) Technical problems to be solved

[0005] To address the shortcomings of existing technologies, this invention provides a method, system, storage medium, and electronic device for building draggable personalized layout pages based on Vue.js, solving the technical problem of not being able to achieve personalized display of system pages and making it feasible for non-professionals to implement.

[0006] (II) Technical Solution

[0007] To achieve the above objectives, the present invention provides the following technical solution:

[0008] A method for building draggable, personalized layout pages based on Vue includes:

[0009] S1. Create a Vue visualization chart component and initialize its configuration;

[0010] S2. Create an echarts chart container;

[0011] S3. Add attribute items to the corresponding chart component name page on the front end; import the chart component on the public configuration attribute page; import the configured attribute item page; expose the option configuration attribute page of the registered component uniformly;

[0012] S4. Register and expose the ECharts chart component;

[0013] S5. Encapsulate the drag-and-drop component and pass in the data for component registration;

[0014] S6. Save the large screen by storing all the configured data; at the same time, generate a large screen image using html2canvas and save it locally.

[0015] Preferably, the initialization configuration in S1 includes component name, component attributes, component initial data, and component theme color.

[0016] Preferably, step S2 further includes:

[0017] Each corresponding ECharts chart is encapsulated using the `updateChart` method. Through related properties under the `option` attribute, the chart style can be changed by switching themes and mixing in development data using Vuex.

[0018] Preferably, step S3 further includes:

[0019] The child component uses `inject` to obtain the main data passed from the parent component `mixins.js`, thus achieving data binding with the `updateChart` method in S2.

[0020] Preferably, the data input for component registration in S5 via injection hijacking and mixing methods includes the component's drag position and component size scaling.

[0021] Preferably, step S5 further includes:

[0022] When the page loads, it checks whether the echarts package is imported, as this is used as a dependency for the component to generate echarts charts by dragging and dropping.

[0023] Listen to the updateChart method each time to update the chart properties and styles that have been modified, and then pass the parameters through props to the parent component to listen for and trigger the method.

[0024] The drag-and-drop component is encapsulated and passes parameters between the parent and child components. The parent component passes data imported through the mixins method to the child component, and the child component receives the data through props.

[0025] Receive parameters from the various property configurations of the drag-and-drop component via props;

[0026] The event triggered when the box included in the draggable component loses focus; encapsulates the method for assigning values ​​to the width, height, and positioning of the draggable component.

[0027] And mouse drag and drop events, component position is set relative to the width of the browser's topbar; the position of each component is stored in a nav list.

[0028] A system for building draggable, personalized layout pages based on Vue, comprising:

[0029] The initialization module is used to create Vue visualization chart components and initialize their configuration.

[0030] Create a module to create an ECharts chart container;

[0031] Add a module to add attribute items configured on the front end for the corresponding chart component name page; import the chart component on the public configuration attribute page; import the configured attribute item page; and expose the option configuration attribute page of the registered component uniformly;

[0032] The registration module is used to register and expose ECharts chart components.

[0033] The encapsulation module is used to encapsulate drag-and-drop components and pass in data for component registration;

[0034] The save module is used to save the large screen and all the configured data; at the same time, it generates a large screen image using html2canvas and saves it locally.

[0035] A storage medium storing a computer program for building draggable, personalized layout pages based on Vue, wherein the computer program causes a computer to perform the method for building draggable, personalized layout pages based on Vue as described above.

[0036] An electronic device, comprising:

[0037] One or more processors;

[0038] Memory; and

[0039] One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the programs including methods for performing the above-described method for building draggable, personalized layout pages based on Vue.js.

[0040] (III) Beneficial Effects

[0041] This invention provides a method, system, storage medium, and electronic device for building draggable, personalized layout pages based on Vue.js. Compared with existing technologies, it has the following advantages:

[0042] This invention includes: creating a Vue visualization chart component and initializing its configuration; creating an ECharts chart container; adding front-end attributes configured on the corresponding chart component name page; importing the chart component into the public configuration attribute page; importing the configured attribute page; uniformly exposing the option configuration attribute page of the registered component; registering and exposing the ECharts chart component; encapsulating a drag-and-drop component and passing in the component registration data; saving the large screen with all configured data; and simultaneously generating a large screen image using html2canvas and saving it locally. This allows users to easily configure the display format of their personal homepage content, enabling them to customize their workspace layout through drag-and-drop functionality. Attached Figure Description

[0043] 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 only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0044] Figure 1 This is a flowchart illustrating a method for constructing a draggable, personalized layout page based on Vue, as provided in an embodiment of the present invention. Detailed Implementation

[0045] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention are described clearly and completely. Obviously, the described embodiments are only some embodiments of the present invention, 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.

[0046] This application provides a method, system, storage medium, and electronic device for building draggable personalized layout pages based on VUE, which solves the technical problem of being unable to achieve personalized display of system pages and is feasible for implementation by non-professionals.

[0047] The technical solution in this application is to solve the above-mentioned technical problems, and the general idea is as follows:

[0048] This invention includes the following steps: creating a Vue visualization chart component and initializing its configuration; creating an ECharts chart container; adding front-end attributes configured on the corresponding chart component name page; importing the chart component into the public configuration attribute page; importing the configured attribute page; uniformly exposing the option configuration attribute page of the registered component; registering and exposing the ECharts chart component; encapsulating a drag-and-drop component and passing in the component registration data; saving the large screen with all configured data; and simultaneously generating a large screen image using html2canvas and saving it locally. This allows users to easily configure the display format of their personal homepage content, enabling them to customize their workspace layout through drag-and-drop functionality.

[0049] To better understand the above technical solutions, the following will provide a detailed explanation of the technical solutions in conjunction with the accompanying drawings and specific implementation methods.

[0050] Example 1:

[0051] like Figure 1 As shown, this embodiment of the invention provides a method for building a draggable personalized layout page based on Vue, including:

[0052] S1. Create a Vue visualization chart component and initialize its configuration;

[0053] S2. Create an echarts chart container;

[0054] S3. Add attribute items to the corresponding chart component name page on the front end; import the chart component on the public configuration attribute page; import the configured attribute item page; expose the option configuration attribute page of the registered component uniformly;

[0055] S4. Register and expose the ECharts chart component;

[0056] S5. Encapsulate the drag-and-drop component and pass in the data for component registration;

[0057] S6. Save the large screen by storing all the configured data; at the same time, generate a large screen image using html2canvas and save it locally.

[0058] This invention provides a convenient way for users to configure the display format of their personal homepage content, allowing them to customize their workspace layout by dragging and dropping elements.

[0059] The following will detail each step of the above technical solution:

[0060] In step S1, a VUE visualization chart component is created and its configuration is initialized.

[0061] The initial configuration in this step includes component name, component properties, initial component data, and component theme color.

[0062] In step S2, an echarts chart container is created;

[0063] This step also includes:

[0064] Each corresponding ECharts chart is encapsulated using the `updateChart` method. Through related properties under the `option` attribute, the chart style can be changed by switching themes and mixing in development data using Vuex.

[0065] In step S3, add the attribute items configured on the front end for the corresponding chart component name page; import the chart component on the public configuration attribute page; import the configured attribute item page; and expose the option configuration attribute page of the registered component uniformly.

[0066] This step also includes:

[0067] The child component uses `inject` to obtain the main data passed from the parent component `mixins.js`, thus achieving data binding with the `updateChart` method in S2.

[0068] In step S4, the echart chart component is registered and exposed.

[0069] In step S5, the drag-and-drop component is encapsulated, and the data for component registration is passed in.

[0070] Specifically, in this step, data is passed in for component registration through injection hijacking and mixin methods, including the component's drag position and component size scaling.

[0071] In addition, S5 also includes:

[0072] When the page loads, it checks whether the echarts package is imported, as this is used as a dependency for the component to generate echarts charts by dragging and dropping.

[0073] The `updateChart` method is listened to each time to update the chart properties and styles that have been modified. Then, parameters are passed to the parent component via props to listen for and trigger this method.

[0074] The drag-and-drop component is encapsulated and passes parameters between the parent and child components. The parent component passes data imported through the mixins method to the child component, and the child component receives the data through props.

[0075] The props function receives parameters for various properties of the draggable component, such as the size, width, and height of the component after scaling up or down, as well as related click event functions.

[0076] The event triggered when the box containing the dragged component loses focus, and the encapsulated method for assigning values ​​to the width, height, and positioning of the dragged component.

[0077] And mouse drag and drop events, component position is set relative to the width of the browser's topbar; the position of each component is stored in a nav list.

[0078] This invention provides a system for building draggable, personalized layout pages based on Vue, comprising:

[0079] The initialization module is used to create Vue visualization chart components and initialize their configuration.

[0080] Create a module to create an ECharts chart container;

[0081] Add a module to add attribute items configured on the front end for the corresponding chart component name page; import the chart component on the public configuration attribute page; import the configured attribute item page; and expose the option configuration attribute page of the registered component uniformly;

[0082] The registration module is used to register and expose ECharts chart components.

[0083] The encapsulation module is used to encapsulate drag-and-drop components and pass in data for component registration;

[0084] The save module is used to save the large screen and all the configured data; at the same time, it generates a large screen image using html2canvas and saves it locally.

[0085] This invention provides a storage medium storing a computer program for building draggable personalized layout pages based on Vue, wherein the computer program causes a computer to execute the method for building draggable personalized layout pages based on Vue as described above.

[0086] This invention provides an electronic device, comprising:

[0087] One or more processors;

[0088] Memory; and

[0089] One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the programs including methods for performing the Vue-based construction of draggable, personalized layout pages as described above.

[0090] It is understood that the system, storage medium, and electronic device for building a draggable personalized layout page based on VUE provided in the embodiments of the present invention correspond to the method for building a draggable personalized layout page based on VUE provided in the embodiments of the present invention. The explanations, examples, and beneficial effects of the relevant content can be referred to the corresponding parts of the method for building a draggable personalized layout page based on VUE, and will not be repeated here.

[0091] In summary, compared with existing technologies, it has the following beneficial effects:

[0092] This invention includes the following steps: creating a Vue visualization chart component and initializing its configuration; creating an ECharts chart container; adding front-end attributes configured on the corresponding chart component name page; importing the chart component into the public configuration attribute page; importing the configured attribute page; uniformly exposing the option configuration attribute page of the registered component; registering and exposing the ECharts chart component; encapsulating a drag-and-drop component and passing in the component registration data; saving the large screen with all configured data; and simultaneously generating a large screen image using html2canvas and saving it locally. This allows users to easily configure the display format of their personal homepage content, enabling them to customize their workspace layout through drag-and-drop functionality.

[0093] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0094] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for building a draggable, personalized layout page based on Vue, characterized in that, include: S1. Create a Vue visualization chart component and initialize its configuration; S2. Create an echarts chart container; S3. Add the attribute items configured on the front end for the corresponding chart component name page; The chart component is then imported into the public configuration properties page; the configuration property page is also imported; and the option configuration property page of the registered component is exposed uniformly. S4. Register and expose the ECharts chart component; S5. Encapsulate the drag-and-drop component and pass in the data for component registration; S6. Save the large screen, including all configured data; simultaneously generate a large screen image using html2canvas and save it locally. The data input for component registration in S5 via injection hijacking and mix-in methods includes the component's drag position and scaling size. S5 also includes: When the page loads, it checks whether the echarts package is imported, as this is used as a dependency for the component to generate echarts charts by dragging and dropping. Listen to the updateChart method each time to update the chart properties that have been modified, and then pass the parameters through props to the parent component to listen for and trigger the method. The drag-and-drop component is encapsulated and passes parameters between the parent and child components. The parent component passes data imported through the mixins method to the child component, and the child component receives it through props. Receive parameters from the various property configurations of the drag-and-drop component via props; The draggable component includes the event triggered when the box loses focus, and encapsulates the width, height, and positioning of the draggable component. And mouse drag and drop events, component position is set relative to the width of the browser's topbar; the position of each component is stored in a nav list.

2. The method for constructing a draggable, personalized layout page based on Vue as described in claim 1, characterized in that, The initialization configuration in S1 includes component name, component properties, component initial data, and component theme color.

3. The method for constructing a draggable, personalized layout page based on Vue as described in claim 1, characterized in that, S2 also includes: Each corresponding ECharts chart is encapsulated using the `updateChart` method. Through related properties under the `option` attribute, the chart style can be changed by switching themes and mixing in development data using Vuex.

4. The method for constructing a draggable, personalized layout page based on Vue as described in claim 3, characterized in that, S3 also includes: The child component uses `inject` to obtain the main data passed from the parent component `mixins.js`, thus achieving data binding with the `updateChart` method in S2.

5. A system for building draggable, personalized layout pages based on Vue, characterized in that, A method for performing the Vue-based draggable personalized layout page as described in claim 1, comprising: The initialization module is used to create Vue visualization chart components and initialize their configuration. Create a module to create an ECharts chart container; Add a module to add attribute items configured on the front end for the corresponding chart component name page; import the chart component into the public configuration attribute page; import the configured attribute item page; and expose the option configuration attribute page of the registered component in a unified manner; The registration module is used to register and expose ECharts chart components. The encapsulation module is used to encapsulate drag-and-drop components and pass in data for component registration; The save module is used to save the large screen and all the configured data; at the same time, it generates a large screen image using html2canvas and saves it locally.

6. A storage medium, characterized in that, It stores a computer program, wherein the computer program causes the computer to perform the method of building a draggable personalized layout page based on Vue as described in any one of claims 1 to 4.

7. An electronic device, characterized in that, include: One or more processors; Memory; as well as One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the programs including the method for building a draggable personalized layout page based on Vue as described in any one of claims 1 to 4.

Images