CN117632100A

CN117632100A - Component construction method, device, equipment and medium based on Vue core system

Info

Publication number: CN117632100A
Application number: CN202311686971.1A
Authority: CN
Inventors: 赵金玉; 郑利斌; 洪海敏; 周颖; 逄林; 彭超; 刘庆扬; 陈明明; 汤志颖
Original assignee: Beijing Smartchip Microelectronics Technology Co Ltd
Current assignee: Beijing Smartchip Microelectronics Technology Co Ltd
Priority date: 2023-12-08
Filing date: 2023-12-08
Publication date: 2024-03-01

Abstract

The invention discloses a component construction method, device, equipment and medium based on a Vue core system. The method comprises the following steps: acquiring a first UI component library and a second UI component library, and constructing an initial popup window component based on at least two functional elements respectively corresponding to the first UI component library and the second UI component library; acquiring a first component from a first UI component library, acquiring a second component from a second UI component library, determining a common code between the first component and the second component, and writing the common code into a component attribute so as to form an initial popup component into a reinforced popup component; the code processing file is configured for the enhanced popup component to form the target popup component. According to the embodiment of the invention, through the technical scheme, the problem that the cost of replacement time between the components is increased due to field non-uniformity of basic use in the components can be solved, the function of custom movement is built, the problem that core information is hidden by the component popup effect and detailed information is lacking is solved, and the grasping capability of information accuracy is improved.

Description

Component construction method, device, equipment and medium based on Vue core system

Technical Field

The invention relates to the technical field of software development, in particular to a method, a device, equipment and a medium for constructing a component based on a Vue core system.

Background

Under the general category of management systems constructed based on Vue, the dialogs and the Drawer have the same or similar solutions in solving the current information redundancy and core information page display, when the core information and the redundant information page based on Vue are constructed, a developer takes up a certain time when choosing to use, the core information page watched by the user generates different views, a new thought appears in shielding the core information, the Model Plus has the effects of optimizing and enabling functions in order to simultaneously meet the viewing problems of the user on the core information and the redundant information, the adhesiveness of the user is enhanced, the developer has the disambiguation in selecting and using different models, the effect is poor, the Model Plus solves the problems that the viewing, the core information display, the redundant information display and the like of the dialogs and the Drawer on the market influence on the user and the developer.

The following problems exist in the combination of Element and Ant Design proposed in the prior art, and the core information based on Vue and the display effect of the redundant page: 1) Four groups of components, namely Model, dialog, draw (Ant) and draw (El), enable development efficiency and choice problems to occur for developers; 2) The problem that no Button exists on a core information page and a redundant page based on Vue of a bottom layer module in a class Model and class Dialog component; 3) The non-uniformity of the tips fields used by the basis of developers belonging to the class Model and the class Dialog components causes the increase of the replacement time cost between the components; 4) The ejection effect in the Model-like component obscures the problems of lack of detail information and the like when users view the core information in the Model and the form at the same time, so that a component construction method based on the Vue core system information and the Vue core system is needed to solve the problems.

Disclosure of Invention

In view of the above, the invention provides a method, a device, equipment and a medium for constructing components based on a Vue core system, which can solve the problem of increased replacement time cost between components caused by field non-uniformity of basic use in the components, improve development efficiency, construct a custom moving function, solve the problem that the core information is hidden by component ejection effect, lack detailed information, and improve grasping capability on information accuracy.

According to an aspect of the present invention, an embodiment of the present invention provides a component building method based on a Vue core system, where the method includes:

acquiring a first UI component library and a second UI component library, and constructing an initial popup window assembly based on at least two functional elements respectively corresponding to the first UI component library and the second UI component library;

acquiring a first component from the first UI component library, acquiring a second component from the second UI component library, determining a common code between the first component and the second component, and writing the common code into a pre-created component attribute so as to form the initial popup component into a reinforced popup component; wherein the common code is an object code with the same function;

configuring a code processing file for the enhanced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

According to another aspect of the present invention, an embodiment of the present invention further provides a component building apparatus based on a Vue core system, where the apparatus includes:

the construction module is used for acquiring a first UI component library and a second UI component library and constructing an initial popup window assembly based on at least two functional elements respectively corresponding to the first UI component library and the second UI component library;

The common code determining module is used for acquiring a first component from the first UI component library, acquiring a second component from the second UI component library, determining a common code between the first component and the second component, and writing the common code into a pre-created component attribute so as to form the initial popup component into an enhanced popup component; wherein the common code is an object code with the same function;

the configuration module is used for configuring a code processing file for the enhanced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

According to another aspect of the present invention, an embodiment of the present invention further provides an electronic device, including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the method of constructing components of the Vue core system according to any one of the embodiments of the present invention.

According to another aspect of the present invention, an embodiment of the present invention further provides a computer readable storage medium, where computer instructions are stored, where the computer instructions are configured to cause a processor to implement the component building method based on the Vue core system according to any embodiment of the present invention when executed.

According to the technical scheme, the initial popup window assembly is built based on at least two functional elements corresponding to the first UI assembly library and the second UI assembly library respectively, and common codes are written into pre-created assembly attributes through determining the common codes between the first assembly and the second assembly, so that the initial popup window assembly is formed into the reinforced popup window assembly, and a code processing file is configured for the reinforced popup window assembly to form the target popup window assembly.

It should be understood that the description in this section is not intended to identify key or critical features of the embodiments of the invention or to delineate the scope of the invention. Other features of the present invention will become apparent from the description that follows.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow chart of a method for constructing components based on a Vue core system according to an embodiment of the present invention;

FIG. 2 is a flow chart of another method for constructing components based on a Vue core system according to an embodiment of the present invention;

FIG. 3 is a block diagram of a device for constructing components based on a Vue core system according to an embodiment of the present invention;

fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present invention without making any inventive effort, shall fall within the scope of the present invention.

It should be noted that the terms "first," "second," and the like in the description and the claims of the present invention and the above figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the invention described herein may be implemented in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

In an embodiment, fig. 1 is a flowchart of a method for constructing a component based on a Vue core system according to an embodiment of the present invention, where the method may be performed by a device for constructing a component based on a Vue core system, where the device for constructing a component based on a Vue core system may be implemented in hardware and/or software, and the device for constructing a component based on a Vue core system may be configured in an electronic device.

As shown in fig. 1, the component construction method based on the Vue core system in this embodiment includes the specific steps of:

s110, acquiring a first UI component library and a second UI component library, and constructing an initial popup window assembly based on at least two functional elements respectively corresponding to the first UI component library and the second UI component library.

The first UI component library may also be referred to as element, and refers to a desktop component library based on VUE. The second UI component library may also be called Ant, which is also a desktop component library based on VUE, and in this embodiment, when elements and Ant are used, a VUE development environment is first built, and then the component library is introduced.

In an embodiment, the initial popup window assembly may be based on at least two functional elements corresponding to the first UI component library and the second UI component library, respectively, which may be understood that the Element and Ant of the base can help to quickly build the Model of the base, where the Model of the base is the initial popup window assembly in this embodiment. In this embodiment, the functional element may also be referred to as a tag element, and includes a tag, where the tag corresponds to a corresponding tag attribute, and the tag attribute includes at least: popup attributes, close attributes, style attributes, line attributes, pass field attributes, and size attributes.

In this embodiment, the initial popup window assembly may be constructed by installing a Vue-cli in a node packet management software (node package manger, NPM) downloader, and constructing a basic Vue ecological project based on the Vue-cli, where the constructed Vue ecological project is that codes used for guaranteeing the overall code acting on the ecology are applied to NPM and Vue, installing elements and Ant used based on Vue in the NPM downloader, and placing the elements and Ant in the Vue ecological environment, and adding functional elements and field attribute information corresponding to the functional elements in the initial popup window assembly. Wherein, the Vue-cli is a tool for rapid project development based on the Vue. It can provide interactive project scaffolding and service dependency at runtime.

S120, acquiring a first component from a first UI component library, acquiring a second component from a second UI component library, determining a common code between the first component and the second component, and writing the common code into a pre-created component attribute so as to form an initial popup component into an enhanced popup component.

The common code is an object code with the same function, and it is understood that the common code has the same function, but the code name and/or specific code implementation manner for realizing the function are different. The pre-created component properties can be understood as Model tips base commonality field properties for storing commonality codes.

In this embodiment, the reinforced popup window assembly may be understood as a reinforced popup window assembly formed by adding common codes corresponding to different assemblies on the basis of the initial popup window assembly, and because the common codes can realize the same function, common fields are extracted and named as common name fields, one package is performed on the original basis, and any one of the different assemblies can be used for building projects and pages. In some embodiments, the first component and the second component may comprise: the business logic component, the dialogue component and the Drawer component are exemplified, the business logic component can be a model, the dialogue component can be a Dialog, the Drawer component can be a driver, and the commonality codes between the Dialog, the driver and the mode base component can be extracted to be made into an object for enhancing the basic commonality field of the popup component.

In this embodiment, the code corresponding to each of the first component and the second component may be searched by traversing the search method, and the common field information and the common method in each code may be extracted as the common code, so as to write the common code into the pre-created component attribute, thereby forming the enhanced popup window component; in other embodiments, the corresponding codes of each component may be converted into intermediate representation forms by processing the corresponding code files of each component, where the intermediate representation forms may abstract some characteristics of the codes, such as grammar characteristics and semantic iron certificates, and the codes may be processed and converted into forms capable of performing commonality comparison according to different code characteristics in a certain manner, so as to obtain commonalities between the codes; of course, other ways of obtaining the common code may be used in addition to the above implementation, and the present embodiment is not limited herein.

S130, configuring a code processing file for the enhanced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

The preset screen window may include, but is not limited to, a browser window. The target popup assembly is understood to be a target popup assembly formed by configuring code processing files for realizing business functions of moving along with a preset screen window on the basis of the enhanced popup assembly. For example, if expressed as a Model, the enhanced window assembly may be expressed as a Model Plus.

In this embodiment, a code processing file is configured for the enhanced popup window assembly to form a target popup window assembly, which can be understood as adding a service function, where the service function can implement the code processing file of the service function moving along with the browser window, and the code processing file is written into the target popup window assembly to achieve the service function moving along with the preset screen window. In this embodiment, after the popup window assembly is opened, some key information may be blocked, the popup window can not be closed yet on the basis of seeing the key information, and this function can be used to track the movement of the browser at this time, and the window can be freely moved, that is, by adding special effects and functions of self-defining to follow the movement of the browser window, the processing of random strain of the information in the Model is improved for the user, the defect of movement in the target popup window assembly is complemented, and the viscosity of the development and use assembly is improved; basic special effects in the target pop-up window assembly are enabled.

In this embodiment, the function of enhancing the code processing file configured by the popup component may include obtaining current position information of the popup component in response to a click operation of the mouse on the popup component, and determining a movement distance of the popup component according to the current position information, where the movement distance may include: the moving distance of the left frame of the reinforced popup window assembly, the moving distance of the right frame of the reinforced popup window assembly, the moving distance of the lower outer frame of the reinforced popup window assembly and the moving distance of the upper outer frame of the reinforced popup window assembly are converted to a certain extent based on a preset regular expression, and the converted moving distance is entrusted to move the popup window through a preset event.

According to the technical scheme, the initial popup window assembly is built through at least two functional elements corresponding to the first UI assembly library and the second UI assembly library respectively, and common codes are written into pre-created assembly attributes through determining the common codes between the first assembly and the second assembly, so that the initial popup window assembly is formed into the reinforced popup window assembly, a code processing file is configured for the reinforced popup window assembly to form the target popup window assembly, the problem that the replacement time cost between assemblies is increased due to the field non-uniformity of basic use in the assemblies can be solved, the development efficiency is improved, the custom moving function is built, the problem that the popup effect of the assemblies masks core information and lacks detail information is solved, and the grasping capability of information accuracy is improved.

In one embodiment, after configuring the code processing file for the enhanced popup assembly to form the target popup assembly, further comprising:

and packaging the target popup assembly, and releasing the packaged target popup assembly to a software package management platform.

In this embodiment, after the target popup window assembly is formed, the target popup window assembly may be packaged, and the packaged target popup window assembly may be issued to the software package management platform for comprehensive management. In this embodiment, the software package management platform may be an NPM platform, so as to be used by a wide range of developers.

In an embodiment, the method further comprises:

adding a button function code into the target popup window assembly, and determining the service condition of the target popup window assembly for freely switching the button function according to the slot attribute of the preset user interface frame; wherein the slot attribute is used to control the opening and closing of the button functions.

The Slot attribute of the preset user interface frame can understand a Vue built-in attribute, which may be called a Slot attribute, and the Slot attribute is used for controlling the opening and closing of the button function.

In this embodiment, a Button function code is added to the target pop-up window assembly, and the use condition of the free switching Button function of the target pop-up window assembly is determined according to the slot attribute of the preset user interface frame, which can be understood as the condition that whether the Button is used or not is used for the free switching of the target pop-up window assembly through the slot attribute of the Vue built-in attribute. In the embodiment, the bottom Button is added, so that the user desirability of using the component by the Model Plus for the developer can be maintained; providing the developer with control over all buttons.

In addition, slot attributes of specific details of the popup window assembly can be added, and the view of the details in the target popup window assembly can be freely switched; specific details of the pop-up component may include, but are not limited to, some information attributes of the Dialog, some information attributes of the Model, which may include, but are not limited to, some form information contained in the viewable page.

In this embodiment, the Button with the foundation is built in, and all models based on the Vue core information page need the Button to perform page submission and cancel operation buttons in the process of numerous development, and the Button is easily controlled and operated in the process of development due to the built-in existence of the target popup window component. It can be understood that the built-in Button of the target popup window component performs unified Button processing on components such as Dialog, model, drawer and invokes a unified method to set Button functions, so that front-end developers are provided with convenience for constructing development basic page information and achieving criticality and custom selectivity.

For example, in order to facilitate understanding of adding the button function code to the target popup window component, the code of adding the button function code is given in this embodiment, < divslot= "folder" class= "dialog-folder"// built-in basic button needs to be self-fillable, < slot/>; </div >.

In an embodiment, fig. 2 is a flowchart of another component construction method based on a Vue core system according to an embodiment of the present invention, where, based on the foregoing embodiments, an initial popup component is constructed by acquiring a first UI component library and a second UI component library and based on at least two functional elements corresponding to the first UI component library and the second UI component library respectively, a first component is acquired from the first UI component library, a second component is acquired from the second UI component library, a common code between the first component and the second component is determined, the common code is written into a pre-created component attribute, and a code processing file is configured for a reinforced popup component to form a target popup component.

As shown in fig. 2, the component construction method based on the Vue core system in this embodiment may specifically include the following steps:

s210, constructing a project folder of the user interface frame through preset project development software.

The preset project development software can be Vue-Cli, and can provide interactive project scaffolds and service dependence during operation. The project folder may be understood as a Vue ecological project file.

In this embodiment, the project folder of the user interface frame is constructed through the preset project development software, where the project folder may include, but is not limited to, a folder, a directory, a template, and a project directory structure, and includes a src folder, a folder with vrd under the folder, some basic Vue pages under the folder, and a component folder for storing all dependency packages of tables and freema that are constructed manually; route can store some tools of the jump of the Vue Route, pre-Route, post-Route, route environment and codes; store is the storage of the whole Vue item of the front end, used for dynamic conversion of Vue data, and rule is used for exporting concrete files of Store, and an entry file app.

S220, downloading and installing the first UI component library and the second UI component library from the public resource, and storing the first UI component library and the second UI component library into a project folder.

In this embodiment, the first UI component library and the second UI component library may be downloaded and installed in a public resource such as NPM or yarn, and stored in the project folder.

S230, the first UI component library and the second UI component library are built in the environment of the user interface frame.

In this embodiment, the first UI component library and the second UI component library are built in the environment of the user interface frame, which can be understood as that they are built in the Vue ecological environment, so that they can controllably use the NPM package in the Vue ecology. Illustratively, elements and Ant used based on Vue are installed and built into the Vue ecological environment.

S240, at least two functional elements contained in the first UI component library and the second UI component library are called, and the functional elements and field attribute information corresponding to the functional elements are added to the initial popup component to construct the initial popup component.

In this embodiment, at least two functional elements respectively included in the first UI component library and the second UI component library are called, and the functional elements and field attribute information corresponding to the functional elements are added to the initial popup component to construct the initial popup component. The functional element may also be called as a tag element, and includes a tag, where the tag corresponds to a corresponding tag attribute, and the tag attribute includes at least: popup attributes, close attributes, style attributes, line attributes, pass field attributes, and size attributes.

S250, traversing and searching codes respectively corresponding to the first component and the second component.

In this embodiment, the code corresponding to each of the first component and the second component is traversed, where the code includes a code and a method for implementing some functions, and the functions that can be implemented in each code may be the same or different, and similarly, the names for each code may be the same or different.

S260, extracting common field information and a common method in each code.

In the present embodiment, common fields having the same function and common methods in each code may be extracted, and of course, the common field information and common methods also realize the same function, but the names and contents are different. In one embodiment, the common field information includes at least one of: width, title, style, and classification; the commonality method comprises the following steps: function start and shut down methods. Exemplary, commonality field information may include, but is not limited to, width, title, style, class; the commonality method may include open and close.

For example, in order to better understand the extracted common field information and the common method, the embodiment provides the extracted common field information and the common method as follows:

ModelProps:{type:Object,

default:()＝>{

return{

width:″,title:″,style:″,class:″,close:true,center:″

}

common extraction of common fields and methods of the same function constitute ModelProps

},

open(){

this.$emit('open')

},

close(){

this.$emit('close')

}。

S270, using the common field information and the common method as common codes, and writing the common codes into the pre-created component attributes to form the initial popup component into the reinforced popup component.

In the embodiment, the common field information and the common method are used as common codes, so that the common codes are written into the pre-created component attribute to form the initial popup component into the reinforced popup component; the common method is integrated in the target popup window assembly and used for realizing the starting and closing functions.

In the embodiment, the common codes are extracted to write the common codes into the pre-created component attributes, so that the initial popup component is formed into the enhanced popup component, the traditional layout of Vue and information pages in traditional dialogs and drager pages is broken through, the field unification is broken through, the development efficiency is improved, and meanwhile the construction based on agile development projects is saved; moreover, the positioning time of the developer on the page components is improved, and the effect that the affiliated page components can be switched back and forth among various components (drager class, dialogs class and Model class) is improved; in this embodiment, the enhanced popup window component can manually make different free choices for front-end developers for core information pages and redundant pages constructed by different vues, lays a foundation for realizing screening and selection of the core information pages and the redundant pages, combines the basic ideas of original dialogs and dragers, and formally makes a critical step based on the Vue core pages and the redundant pages, and makes an important outstanding contribution in the step of realizing page uniformity.

S280, configuring a code processing file for the reinforced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

In this embodiment, a code processing file is configured for the enhanced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

In this embodiment, the enhanced popup component builds the custom function of following the moving special effects of the browser popup on top of the Model and Dialog base components to form the target popup component. The method is characterized in that when users view the page based on all Vue core information, the coverage of the Model can cause the problem of incomplete information viewing of the users, and the target popup assembly encapsulates and pushes out the enhanced popup assembly so as to complement the problem of incomplete information blurring and redundant information of the forms of the users according to the user-defined moving effect.

In one embodiment, the functions of code processing files configured for an enhanced pop-up assembly include:

responding to clicking operation of the mouse on the reinforced popup window assembly, and acquiring current position information of the reinforced popup window assembly; the current position information characterizes the current distance information between the reinforced popup window component and a preset screen window;

responding to a mouse moving operation event, determining a first moving distance according to a first distance and a second distance in the current position information and X-axis coordinate information of the mouse relative to a visual area of a preset screen window, and determining a second moving distance according to a third distance and a fourth distance in the current distance information and Y-axis coordinate information of the mouse relative to the visual area of the preset screen window;

Taking the first moving distance and the second moving distance as moving position information;

converting the moving position information according to a preset regular matching expression to obtain pixel-form moving position information, and taking the converted moving position information as a target moving distance;

and carrying out popup movement by taking the target movement distance as a popup movement position.

Wherein, the current distance information includes: the first distance from the left frame of the reinforced popup window component to the left boundary of the preset screen window, the second distance from the right frame of the reinforced popup window component to the right boundary of the preset screen window, the third distance from the lower outer frame of the reinforced popup window component to the lower boundary of the preset screen window, and the fourth distance from the upper outer frame of the reinforced popup window component to the upper boundary of the preset screen window.

In this embodiment, when the mouse clicks on the enhanced popup assembly, current position information of the enhanced popup assembly is obtained, and the current position information characterizes current distance information between the enhanced popup assembly and a preset screen window; responding to a mouse moving operation event, determining a first moving distance according to a first distance and a second distance in the current position information and X-axis coordinate information of the mouse relative to a visual area of a preset screen window, and determining a second moving distance according to a third distance and a fourth distance in the current distance information and Y-axis coordinate information of the mouse relative to the visual area of the preset screen window; taking the first moving distance and the second moving distance as moving position information; converting the moving position information according to a preset regular matching expression to obtain pixel-form moving position information, and taking the converted moving position information as a target moving distance; taking the target moving distance as a popup window moving position to move the popup window; it can be understood that when the popup window needs to be moved, the distance to be moved is calculated, including the distance information from the left and/or the right, and the distance information is converted through the preset regular matching expression, so that the popup window is moved.

For better understanding, in this embodiment, the popup component is taken as a Model Plus, and special effects and functions of the Model Plus for self-defining and moving along with a browser window are added as examples, and in this embodiment, the special effects and functions of the Model Plus for self-defining and moving along with the browser window are added, so that the user can process random strain on information in the Model, complement defects of movement in the Model Plus component, and improve viscosity of development and use components; the basic special effects in the Model Plus component are enabled.

Dialog Header El.onmousedown＝(e)＝>{

Mouse-down, calculating the distance of the current element from the visible region

const disX＝e.clientX-dialogHeaderEl.offsetLeft；

const disY＝e.clientY-dialogHeaderEl.offsetTop；

const dragDomWidth＝dragDom.offsetWidth；

const dragDomHeight＝dragDom.offsetHeight；

const screenWidth＝document.body.clientWidth；

const screenHeight＝document.body.clientHeight；

Boundary processing;

const minDragDomLeft＝dragDom.offsetLeft；

const maxDragDomLeft＝screenWidth-dragDom.offsetLeft-dragDomWidth；

const minDragDomTop＝dragDom.offsetTop；

const maxDragDomTop＝screenHeight-dragDom.offsetTop-dragDomHeight；

positive matching substitution of the value band px obtained

let styL＝getStyle(dragDom,'left')

let styT＝getStyle(dragDom,'top')

if(styL.includes('％')){

styL＝+document.body.clientWidth*(+styL.replace(/\％/g,”)/100)

styT＝+document.body.clientHeight*(+styT.replace(/\％/g,”)/100)

}else{

styL＝+styL.replace(/\px/g,”)

styT＝+styT.replace(/\px/g,”)

}

}。

According to the technical scheme, at least two functional elements contained in a first UI component library and a second UI component library are called, the functional elements and field attribute information corresponding to the functional elements are added in an initial popup window component to construct the initial popup window component, codes corresponding to the first component and the second component are searched in a traversing mode, common field information and a common method in the codes are extracted, the common field information and the common method are used as the common codes, the common codes are written into the pre-created component attribute, the traditional layout of Vue and information pages in the transmitted dialogs and the drug page is broken through, the field unification is broken through, the development efficiency is improved, and meanwhile the construction based on agile development projects is saved; moreover, the positioning time of the developer on the page components is improved, and the effect that the affiliated page components can be switched back and forth among various components (drager class, dialogs class and Model class) is improved; responding to clicking operation of the mouse on the reinforced popup window assembly, and acquiring current position information of the reinforced popup window assembly; responding to a mouse moving operation event, determining a moving distance according to the current position information, converting the moving distance according to a preset regular matching expression to obtain pixel-form moving position information, taking the converted moving position information as a target moving distance, and taking the target moving distance as a popup moving position to perform popup movement, so that the problem that a user has incomplete form information blurring and redundant information can be solved according to the user-defined moving effect, and the grasping capability of information accuracy is improved.

In an embodiment, fig. 3 is a block diagram of a device for constructing components based on a Vue core system according to an embodiment of the present invention, where the device is applicable to a case when components based on a Vue core system information are constructed, and the device may be implemented by hardware/software. The component construction method based on the Vue core system in the embodiment of the invention can be configured in electronic equipment.

As shown in fig. 3, the apparatus includes: a build module 310, a commonality code determination module 320, and a configuration module 330.

The construction module 310 is configured to obtain a first UI component library and a second UI component library, and construct an initial popup component based on at least two functional elements corresponding to the first UI component library and the second UI component library respectively;

the common code determining module 320 is configured to obtain a first component from the first UI component library, obtain a second component from the second UI component library, determine a common code between the first component and the second component, and write the common code into a pre-created component attribute, so as to form the initial popup component into an enhanced popup component; wherein the common code is an object code with the same function;

A configuration module 330, configured to configure code processing files for the enhanced popup assembly to form a target popup assembly; the code processing file is used for realizing a business function of moving along with a preset screen window.

According to the embodiment of the invention, the construction module constructs the initial popup window assembly based on at least two functional elements respectively corresponding to the first UI assembly library and the second UI assembly library, the common code determining module writes the common code into the pre-established assembly attribute by determining the common code between the first assembly and the second assembly so as to form the reinforced popup window assembly, the configuration module configures the code processing file for the reinforced popup window assembly to form the target popup window assembly, the problem that the replacement time cost between assemblies is increased due to the field non-uniformity of basic use in the assemblies can be solved, the development efficiency is improved, the function of custom movement is constructed, the problem that the popup effect of the assemblies masks core information and lacks detail information is solved, and the grasping capability of information accuracy is improved.

In an embodiment, the functional element includes a tag, the tag corresponds to a corresponding tag attribute, and the tag attribute includes at least: popup attributes, close attributes, style attributes, line attributes, pass field attributes, and size attributes.

In an embodiment, the apparatus further comprises:

and the packaging module is used for packaging the target popup assembly after the code processing file is configured for the enhanced popup assembly to form the target popup assembly, and releasing the packaged target popup assembly into the software package management platform.

In an embodiment, the apparatus further comprises:

the switching module is used for adding a button function code into the target popup window assembly and determining the service condition of the free switching button function of the target popup window assembly according to the slot attribute of the preset user interface frame; wherein the slot attribute is used for controlling the opening and closing of the button function.

In one embodiment, the constructing module 310 includes:

the construction unit is used for constructing a project folder of the user interface frame through preset project development software;

and the downloading unit is used for downloading and installing the first UI component library and the second UI component library from the public resource and storing the project folder.

In one embodiment, the construction module 310 further includes:

the environment built-in module is used for built-in the first UI component library and the second UI component library in the environment of the user interface frame;

And the calling module is used for calling at least two functional elements respectively contained in the first UI component library and the second UI component library, and adding the functional elements and field attribute information corresponding to the functional elements in the initial popup component to construct the initial popup component.

In an embodiment, the first component and the second component comprise: business logic components, dialog components, and drawer components; accordingly, the commonality code determining module 320 includes:

the searching unit is used for traversing and searching codes respectively corresponding to the first component and the second component;

the extraction unit is used for extracting the common field information and the common method in each code;

a writing unit configured to use the common field information and the common method as the common code, so as to write the common code into a component attribute created in advance; the commonality method is integrated in the target popup window assembly and used for realizing the starting and closing functions.

In an embodiment, the common field information includes at least one of: width, title, style, and classification; the commonality method comprises the following steps: function start and shut down methods.

In one embodiment, the functions of the code processing file configured for the enhanced popup component include:

responding to clicking operation of a mouse on the reinforced popup window assembly, and acquiring current position information of the reinforced popup window assembly; the current position information characterizes current distance information between the reinforced popup window assembly and the preset screen window; wherein the current distance information includes: the left frame of the reinforced popup window assembly is at a first distance from the left boundary of the preset screen window, the right frame of the reinforced popup window assembly is at a second distance from the right boundary of the preset screen window, the lower outer frame of the reinforced popup window assembly is at a third distance from the lower boundary of the preset screen window, and the upper outer frame of the reinforced popup window assembly is at a fourth distance from the upper boundary of the preset screen window;

responding to a mouse moving operation event, determining a first moving distance according to a first distance and a second distance in the current position information and X-axis coordinate information of the mouse relative to a visual area of the preset screen window, and determining a second moving distance according to a third distance and a fourth distance in the current distance information and Y-axis coordinate information of the mouse relative to the visual area of the preset screen window;

The component construction device based on the Vue core system provided by the embodiment of the invention can execute the component construction method based on the Vue core system provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the execution method.

In an embodiment, fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present invention. The electronic device 10 is intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. Electronic equipment may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices (e.g., helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the inventions described and/or claimed herein.

As shown in fig. 4, the electronic device 10 includes at least one processor 11, and a memory, such as a Read Only Memory (ROM) 12, a Random Access Memory (RAM) 13, etc., communicatively connected to the at least one processor 11, in which the memory stores a computer program executable by the at least one processor, and the processor 11 may perform various appropriate actions and processes according to the computer program stored in the Read Only Memory (ROM) 12 or the computer program loaded from the storage unit 18 into the Random Access Memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 may also be stored. The processor 11, the ROM 12 and the RAM 13 are connected to each other via a bus 14. An input/output (I/O) interface 15 is also connected to bus 14.

Various components in the electronic device 10 are connected to the I/O interface 15, including: an input unit 16 such as a keyboard, a mouse, etc.; an output unit 17 such as various types of displays, speakers, and the like; a storage unit 18 such as a magnetic disk, an optical disk, or the like; and a communication unit 19 such as a network card, modem, wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunication networks.

The processor 11 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various processors running machine learning model algorithms, digital Signal Processors (DSPs), and any suitable processor, controller, microcontroller, etc. The processor 11 performs the various methods and processes described above, such as the component building method based on the Vue core system.

In some embodiments, the component build processing method based on the Vue core system may be implemented as a computer program tangibly embodied on a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program may be loaded and/or installed onto the electronic device 10 via the ROM 12 and/or the communication unit 19. When the computer program is loaded into RAM 13 and executed by processor 11, one or more steps of the above-described method of component construction based on a Vue core system may be performed. Alternatively, in other embodiments, processor 11 may be configured to perform the method of component construction of the Vue core-based system in any other suitable manner (e.g., by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.

A computer program for carrying out methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general purpose computer, special purpose computer, or other programmable apparatus for constructing components of a Vue core system, such that the computer programs, when executed by the processor, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The computer program may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of the present invention, a computer-readable storage medium may be a tangible medium that can contain, or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. The computer readable storage medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. Alternatively, the computer readable storage medium may be a machine readable signal medium. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

To provide for interaction with a user, the systems and techniques described here can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) through which a user can provide input to the electronic device. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), blockchain networks, and the internet.

The computing system may include clients and servers. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical hosts and VPS service are overcome.

It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps described in the present invention may be performed in parallel, sequentially, or in a different order, so long as the desired results of the technical solution of the present invention are achieved, and the present invention is not limited herein.

The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.

Claims

1. A method for constructing a component based on a Vue core system, comprising:

2. The method of claim 1, wherein the functional element comprises a tag, the tag corresponding to a respective tag attribute, the tag attribute comprising at least: popup attributes, close attributes, style attributes, line attributes, pass field attributes, and size attributes.

3. The method of claim 1, further comprising, after said configuring the code processing file for the enhanced popup assembly to form a target popup assembly:

4. The method according to claim 1, characterized in that the method further comprises:

adding a button function code into the target popup window assembly, and determining the service condition of the free switching button function of the target popup window assembly according to the slot attribute of a preset user interface frame; wherein the slot attribute is used for controlling the opening and closing of the button function.

5. The method of claim 1, wherein the obtaining the first UI component library and the second UI component library comprises:

constructing a project folder of the user interface frame through preset project development software;

and downloading and installing the first UI component library and the second UI component library from a public resource, and storing the project folder.

6. The method of claim 1, wherein the constructing an initial popup component based on at least two functional elements respectively corresponding to the first UI component library and the second UI component library comprises:

placing the first UI component library and the second UI component library in an environment of a user interface frame;

and calling at least two functional elements respectively contained in the first UI component library and the second UI component library, and adding the functional elements and field attribute information corresponding to the functional elements in the initial popup component to construct the initial popup component.

7. The method of claim 1, wherein the first component and the second component comprise: business logic components, dialog components, and drawer components; accordingly, the determining the common code between the first component and the second component to write the common code into the pre-created component attribute includes:

Traversing and searching codes respectively corresponding to the first component and the second component;

extracting common field information and a common method in each code;

taking the common field information and the common method as the common code to write the common code into a pre-created component attribute; the commonality method is integrated in the target popup window assembly and used for realizing the starting and closing functions.

8. The method of claim 7, wherein the common field information comprises at least one of: width, title, style, and classification; the commonality method comprises the following steps: function start and shut down methods.

9. The method of claim 1, wherein the function of code processing files configured for the enhanced popup component comprises:

10. A component building apparatus based on a Vue core system, comprising:

11. The apparatus of claim 10, wherein the apparatus further comprises:

12. The apparatus of claim 10, wherein the first component and the second component comprise: business logic components, dialogue components, drawer components; correspondingly, the commonality code determining module comprises:

13. An electronic device, the electronic device comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the Vue core system-based component building method of any one of claims 1-9.

14. A computer readable storage medium storing computer instructions for causing a processor to implement the method of component construction of a Vue core system according to any one of claims 1-9 when executed.