Method for constructing message prompt plug-in based on vuetify encapsulation

Abstract

The application relates to a method for constructing a message prompt plug-in based on a vuetify encapsulation, wherein vuetify is used to write a component of the message prompt in a progressive framework, the component is imported into a page logic file for development of the plug-in, the developed plug-in is introduced in an entry file of the project, the introduced plug-in is registered through a global method, and finally, the registered plug-in is directly called in a template, so that rich style parameters and methods are provided at the same time, all needs of developers can be met, the use experience of users can be improved, and the development efficiency of the developers can be greatly improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the front-end development field, and particularly relates to a general, reusable and customizable page notification pop-up plug-in constructed by using a web technology based on a vue framework. BACKGROUND

[0002] With the rapid development of the Internet, front-end technology also develops rapidly, various demands emerge in an endless stream, and the logic of pages becomes more and more complex. In order to improve the user experience, message prompts have become an indispensable part.

[0003] Vuetify is a complete interface framework built on Vue.js. The goal of this project is to provide developers with the tools they have accumulated and the user experience they need. Unlike other frameworks, Vuetify is designed to be easy to learn from the beginning and has hundreds of well-designed components from the Material Design specification. However, its message prompt component v-snackbar is not as convenient for developers to use as elementui.

[0004] At this time, a plug-in of a message prompt that can be plugged in and used is encapsulated based on vuetify, and rich style parameters and methods are provided, which can meet all the needs of developers, not only can improve the user experience, but also can greatly improve the development efficiency of developers. At the same time, in order to solve the use efficiency and expansion performance of the plug-in, the use frequency and other information of the plug-in need to be counted and optimized. SUMMARY

[0005] The present application aims to solve the inconvenience of using v-snackbar of Vuetify, and improve the development efficiency to develop the experience through the plug-in.

[0006] TECHNICAL SOLUTION

[0007] According to one aspect of the present application, a method for constructing a message prompt plug-in encapsulated based on vuetify is provided,

[0008] S1, constructing a message prompt component and a directory by using a vuetify module in a progressive framework, and setting all parameters in the message prompt component to dynamically define a message prompt style;

[0009] S2, creating a page logic file in the directory, importing the message prompt component into the page logic file by using an import module, calling a preset global component registration method to develop a plug-in in the page logic file, and obtaining a first plug-in;

[0010] S3, construct an entry file and introduce a first plug-in, register the introduced first plug-in; call the registered first plug-in in a preconfigured template.

[0011] According to an aspect of the present application, the message prompt component comprises: a message prompt type, a message prompt content, how long to disappear, a custom icon, a message prompt position, a message prompt variant, a message prompt dark theme, a message prompt light theme, a horizontal offset, a vertical offset, whether to display a close button, whether to select a vuetify style, and an offset transition time when selecting an elementui style.

[0012] According to an aspect of the present application, in step S2, the method of globally registering components in a page logic file is specifically:

[0013] S21, initialize a storage timer and a variable of each message prompt;

[0014] S22, use a basic vue constructor to render the variable and instantiate the component;

[0015] S23, if no parameters are passed to the instance of S22, the vuetify style is used by default, and since the message prompt of the vuetify style is a single instance, first check whether the instance exists in the container of the storage instance, if the instance exists in the container, remove and destroy the previous instance, and then store the instance in the container;

[0016] S24, if parameters are passed to the instance of S22, first judge whether the timeout is "-1", if not "-1", start a timer, when the timer reaches the time, first clear the DOM element in the instance, then judge whether it is a vuetify style, if not a vuetify style, traverse the container of the storage instance, remove the first instance and clear its corresponding timer, then calculate the downward offset of the remaining instances, then use the destroyed component to destroy the instance, clean up its connection with other instances, and unbind all its instructions and event listeners, if it is a vuetify style, return to step S23;

[0017] S25, use the mounting module to manually mount the instance and create the root DOM element used by the instance, and then insert the root DOM element into the instance.

[0018] According to an aspect of the present application, S3 introduces the developed plug-in in the entry file of the project, specifically, in the main.js file, the plug-in is introduced by Import.

[0019] According to an aspect of the present application, S23 specifically judges whether to select a vuetify style.

[0020] If no parameter is passed, the default is the vuetify style, because the message prompt of vuetify is single instance, when a message prompt, it will first judge whether there is a message prompt, if there is, destroy the previous message prompt, ensure that there is only one instance; But considering that users may need the effect of elementui, that is, multiple instances, so when vuetify passes false, the effect of elementui is adopted, allowing multiple instances to exist, that is, saving each message prompt and the corresponding timer, whenever a message prompt, the remaining message instances are offset downward, so as to achieve the effect of elementui; The downward offset here is to realize the corresponding offsetY by calculating the position.

[0021] According to one aspect of the present application, step S4, the plug-in counter is constructed to record the usage frequency of each plug-in; the plug-in component element evaluation set is constructed, the plug-in fuzzy evaluation matrix is constructed based on the plug-in component element evaluation set, and is normalized and regularized; the processed plug-in fuzzy evaluation matrix is converted into an accumulated matrix, and is further converted into a Boolean matrix, and the skeleton matrix is constructed based on the Boolean matrix; the plug-in pushing sequence is constructed by using the skeleton matrix.

[0022] According to one aspect of the present application, the process of regularizing the fuzzy evaluation matrix is as follows: for each index in each column, the proportion, entropy value and difference coefficient of the index in the column index are calculated one by one. The process of converting into an accumulated matrix is: arranged in descending order according to the proportion, and then sequentially accumulated.

[0023] Beneficial effects: the present application encapsulates a plug-in for message prompt based on vuetify, which not only improves the user experience, but also greatly improves the development efficiency of developers. BRIEF DESCRIPTION OF DRAWINGS

[0024] Figure 1 The use mode of the plug-in is shown in the figure. DETAILED DESCRIPTION

[0025] As described in the background, with the rapid development of the Internet, front-end technology also develops rapidly, various demands emerge in an endless stream, and the logic of the page becomes more and more complex. In order to improve the user experience, message prompt has become an indispensable part, but the message prompt component v-snackbar of the prior art is not as convenient as elementui for developers.

[0026] The application provides a plugin for encapsulating a plug-and-play message prompt based on vuetify, and rich style parameters and methods are provided, so that all needs of developers can be met, the use experience of users can be improved, and the development efficiency of developers can be greatly improved. The specific steps are:

[0027] S1. Create index.ts and MessageSnackbar.vue files.

[0028] S2. In the MessageSnackbar.vue file, use v-snackbar of vuetify to write a message prompt before encapsulation, then define all the parameters needed to be transmitted, and then define the style of v-snackbar dynamically through the defined variables.

[0029] S3. Import the MessageSnackbar.vue file into the index.ts using import. Then develop the plugin in the index.ts, and need to expose an install method first, the method has a vue instance parameter. First, initialize the required variables in install, such as storing the timer and the variable of each message prompt, then use Vue.extend(MessageSnackbar) to render and instantiate the component.

[0030] S4. Determine whether to use the vuetify style, if the style is used, first check whether there is a message instance in the container of the stored message, then remove and destroy the previous DOM element and instance.

[0031] S5. Manually mount the instance using $mount and create the root DOM element used by the instance, and then insert the root DOM element into the page.

[0032] S6. Parameter passing and default value setting are performed on the instance.

[0033] S7. Determine whether timeout is '-1', if timeout is not '-1', start a timer, when the time arrives, first clear the DOM element, then determine whether it is a vuetify style, if it is not, traverse the container of the stored instance, remove the first instance and clear the corresponding timer, then calculate the downward offset of the remaining instances, then use $destroy to completely destroy the instance, clean up its connection with other instances, and unbind all its directives and event listeners.

[0034] S8. Finally, inject a $msg calling method into the Vue instance.

[0035] S9. Directly call the registered plugin in the template.

[0036] For the convenience of understanding, the application designs the corresponding fields and data structure parameters required for the plug-in parameter passing:

[0037] type:string message prompt type

[0038] message:string message prompt content

[0039] timeout:string prompt how long to disappear

[0040] icon:object custom icon

[0041] positions:array message prompt position

[0042] variants:array message prompt variants

[0043] dark:boolean message prompt dark theme

[0044] light:boolean message prompt light theme

[0045] offsetX:number horizontal offset

[0046] offsetY:number vertical offset

[0047] showClose:boolean whether to display the close button

[0048] vuetify:boolean whether to choose vuetify style

[0049] transition:number offset transition time when choosing elementui style

[0050] The optional values of the designed message prompt type type are success: set to success prompt; warning: set to warning prompt; info: set to information prompt; error: set to error prompt. According to different type, there will be corresponding default style, for example: when type is set to success, the background of message prompt is green, and its icon is a white background green hook.

[0051] Message prompt content message: will prompt the user through the passed message.

[0052] The time of message prompt disappearance timeout: the default is 3 seconds after the prompt disappears, if timeout is passed, it will disappear according to the time passed, if '-1' is passed, it will never disappear.

[0053] Set custom icon icon: custom prompt icon, if not passed, use the default icon according to type. For the list of all available icons, you can access the official Material Design icon page. To use any of these icons, simply use the'mdi-' prefix, followed by the icon name; color: the background color of the message prompt box, if not passed, use the default color according to type; icolor: custom icon color, if not passed, use the default color according to type.

[0054] Design the position of the message prompt positions: because there are multiple positions and they can be mixed, positions is passed as an array, if this parameter is not passed, the default value [‘top’] is used, which is the position above the page. The remaining parameters are [‘left’], [‘right’], [‘bottom’] and [‘center’] respectively, which are the left side of the page, the right side of the page, the bottom of the page and the center of the page; positions can also coexist, such as: [‘top’,‘left’], the position is set to the top left of the page.

[0055] Design the variants of the message prompt variants: like positions, variants have multiple variants and can be mixed, so variants are passed as an array, if this parameter is not passed, no variant is set; variants have the following parameters: [‘text’] applies the defined color to the text and the same low transparency background; [‘outlined’] removes the solid color of the card and adds a thin border; [‘shaped’] applies a larger border radius to the top left and bottom right corners of the card.

[0056] Message prompt dark: apply dark theme variables to the component, you can find more information about it in the Material Design documentation of dark themes.

[0057] Message prompt light: set light theme for the component.

[0058] Horizontal offset offsetX: positive number to the right, otherwise, negative number to the left.

[0059] Vertical offset offsetY: positive number to the right, otherwise, negative number to the left.

[0060] showClose: If not passed, the message prompt cannot be manually closed by default. If true is passed, a close button will appear in the upper right corner of the message prompt, allowing the user to manually close the message prompt.

[0061] vuetify: If not passed, the default style is vuetify. Since vuetify's message prompt is a single instance, when a message prompt is displayed, it will first check if there is already a message prompt. If there is, it will destroy the previous message prompt to ensure that only one instance exists at all times. However, considering that users may need an effect similar to elementui, which allows multiple instances, when vuetify is passed as false, the elementui effect is adopted, allowing multiple instances to exist, i.e. saving each message prompt and the corresponding timer. Whenever a message prompt is displayed, it will offset the remaining message instances downward, achieving the elementui effect. The downward offset here is achieved by calculating the position and setting the corresponding offsetY.

[0062] transition: If not passed, the default transition time is 0.2s.

[0063] As shown in Figure 1 the plugin usage instance is as follows:

[0064] Sa. Use npm reference: npm install message-snackbar;

[0065] Sb. Reference the plugin in the main.js file:

[0066] Import msg from

[0067] "message-snackbar / src / components / message-snackbar";

[0068] Vue.use(msg);

[0069] Sc. When a message prompt is needed, simply call $msg, such as:

[0070]

[0071] The embodiment shows the use of the plug-in, which is based on the vue framework, uses web technology to build a general, reusable, and customizable page notification pop-up plug-in, and provides rich style parameters and methods, which can meet all the needs of developers, not only can improve the user experience, but also can greatly improve the development efficiency of developers.

[0072] In further embodiments, comprising the steps of:

[0073] Optional values for the type prop: success: sets the success variant; warning: sets the warning variant; info: sets the info variant; error: sets the error variant. Depending on the type prop, the component will have a different default style. For example: when type is set to success, the message will have a green background and a check icon. The message prop: the message prop is used to display the message to the user. The timeout prop: the timeout prop is used to set the time in milliseconds before the message disappears. If the timeout prop is not passed, the message will disappear after 3 seconds. If the timeout prop is passed, the message will disappear after the specified time. If the timeout prop is set to -1, the message will never disappear. The icon prop: the icon prop is used to set the icon for the message. If the icon prop is not passed, the component will use the default icon based on the type prop. The color prop: the color prop is used to set the color of the message. If the color prop is not passed, the component will use the default color based on the type prop. The icolor prop: the icolor prop is used to set the color of the icon. If the icolor prop is not passed, the component will use the default color based on the type prop. The positions prop: the positions prop is used to set the position of the message. The positions prop is an array of strings that represent the positions of the message. If the positions prop is not passed, the component will use the default position, which is top. The positions prop can have the following values: left: sets the left position; right: sets the right position; bottom: sets the bottom position; center: sets the center position. The variants prop: the variants prop is used to set the variant of the message. The variants prop is an array of strings that represent the variants of the message. If the variants prop is not passed, the component will not have any variants. The variants prop can have the following values: text: applies the color prop to the text and a low opacity background; outlined: removes the solid color of the card and adds a thin border; shaped: applies a larger border radius to the top-left and bottom-right corners of the card. The dark prop: the dark prop is used to apply the dark theme to the component. The light prop: the light prop is used to set the light theme for the component.Horizontal offset amount offsetX: positive number to the right offset, otherwise, negative number to the left offset; vertical offset amount offsetY: positive number to the down offset, otherwise, negative number to the up offset; whether to display the close button showClose: if the parameter is not passed, the default is not manually closed message prompt, if true, the upper right corner of the message prompt will have a close button, which can be used to manually close the message prompt; whether to select vuetify style vuetify: if not passed, the default is vuetify style. Since the message prompt of vuetify is single instance, when a message prompt, it will first judge whether there is a message prompt, if there is, destroy the previous message prompt, ensure that there is only one instance; But considering that users may need similar elementui effect, that is, multiple instances, so when vuetify is false, the elementui effect is adopted, allowing multiple instances to exist, that is, saving each message prompt and the corresponding timer, every time the message prompt, the remaining message instance is offset down, so as to achieve the effect of elementui; The offset down here is realized by calculating the position and setting the corresponding offsetY; The transition time when setting the elementui style is transition: if the parameter is not passed, the default transition time is 0.2s.

[0074] The specific plug-in implementation steps are as follows: create index.ts and MessageSnackbar.vue files. In the MessageSnackbar.vue file, use v-snackbar of vuetify to write a message prompt before encapsulation, then define all the parameters that need to be passed in, and then define the style of v-snackbar dynamically through the defined variables. Import the MessageSnackbar.vue file into the index.ts file. Then develop the plug-in in the index.ts file. First, expose an install method, which has a vue instance parameter. First, initialize the required variables in install, such as storing the timer and the variable of each message prompt, then use Vue.extend(MessageSnackbar) to render and instantiate the component. Determine whether to use the vuetify style, if the style is used, first check whether there is a message instance in the container that stores the message, then remove and destroy the previous DOM element and instance. Use $mount to manually mount the instance and create the root DOM element used by the instance, then insert the root DOM element into the page. Parameterize the instance and set the default value. Determine whether timeout is "-1", if not "-1", start a timer, when the time arrives, first clear the DOM element, then determine whether it is a vuetify style, if not, traverse the container that stores the instance, remove the first instance and clear its corresponding timer, then calculate the downward offset of the remaining instances, then use $destroy to completely destroy the instance, clean up its connection with other instances, and unbind all its directives and event listeners. Finally, inject a $msg calling method into the Vue instance.

[0075] In order to recommend and modify the plug-in more efficiently and build a more accurate plug-in set, the following method is provided.

[0076] According to an aspect of the present application, step S4, a plug-in counter is constructed to record the usage frequency of each plug-in; a plug-in component element evaluation set is constructed, a plug-in fuzzy evaluation matrix is constructed based on the plug-in component element evaluation set, and is normalized and regularized; the processed plug-in fuzzy evaluation matrix is converted into an accumulated matrix, and is further converted into a Boolean matrix, a skeleton matrix is constructed based on the Boolean matrix; the plug-in pushing sequence is constructed using the skeleton matrix. The process of converting into an accumulated matrix is: arranging in descending order according to the proportion, and then sequentially accumulating.

[0077] First, the original matrix S=[s ij ] n×m; and then normalized by Min-Max method, sorted by weight, and the specific method is that for each index in each column, the proportion of the index in the column, entropy value and difference coefficient are calculated one by one. Then, cumulative clustering is carried out, and the cumulative matrix D is accumulated according to the weight size direction value as follows:

[0078] The first column: f 12 , f 12 +f 11 , …, f 12 +f 11 +…+f 1m ;

[0079] The second column: f 22 , f 22 +f 21 , …, f 22 +f 21 +…+f 2m ;

[0080] The nth column: f n2 , f n2 +f n1 , …, f n2 +f n1 +…+f nm .

[0081] The process of converting into a Boolean matrix is that any two rows x row and y row in the matrix D. When the matrix value d x1 >d y1 and d x2 >d y2 and d x3 >d y3 and…and d xm >d ym ; PS(x)> PS(y); Boolean matrix A is = [a xy ] n×n ;

[0082] axy=1, PS(x)> PS(y), that is, the partial order comparison of x row and y row in the matrix D;

[0083] axy=0, PS(x)≯PS(y), that is, the partial order comparison of x row and y row in the matrix D;

[0084] Based on the Boolean matrix, a skeleton matrix is constructed: B=(A+I); R=B (k+1) ; S=R-(R-I) 2 -I; I is the unit matrix.

[0085] In one embodiment, if there are 10 plugins, each plugin has 5 elements. A 10x5 matrix can be constructed, and then the weight of the plugin is calculated by the above method and the decision ranking is given, thereby facilitating the construction of a more optimized plugin set.

[0086] The preferred embodiments of the present application are described in detail above, but the present application is not limited to the specific details of the above-described embodiments. Within the technical concept of the present application, various equivalent transformations of the technical solutions of the present application can be made, and these equivalent transformations all belong to the protection scope of the present application.

Claims

1. A method for constructing a message prompt plug-in based on vuetify encapsulation, characterized in that, The method comprises the following steps: S1, constructing a message prompt component and a directory in a progressive framework using a vuetify module, and setting all parameters in the message prompt component to dynamically define the message prompt style; S2, creating a page logic file in the directory, importing the message prompt component into the page logic file using an import module, calling a preset global component registration method to develop a plug-in in the page logic file, and obtaining a first plug-in; S3, constructing an entry file and importing the first plug-in, and registering the imported first plug-in; Calling the registered first plug-in in a preconfigured template; S4, constructing a plug-in counter for recording the usage frequency of each plug-in; Constructing a plug-in component element evaluation set, constructing a plug-in fuzzy evaluation matrix based on the plug-in component element evaluation set, and normalizing and regularizing; converting the processed plug-in fuzzy evaluation matrix into an accumulated matrix, and further converting it into a Boolean matrix, constructing a skeleton matrix based on the Boolean matrix; constructing a plug-in pushing sequence using the skeleton matrix; The process of normalizing the fuzzy evaluation matrix is as follows: for each index in each column, calculate the proportion, entropy value and difference coefficient of the index in the column; The process of converting into an accumulated matrix is: arrange in descending order according to the proportion, and then sequentially accumulate; The original matrix S=[s ij ] n×m ; is constructed according to the use frequency of the plug-in and the parameters of the plug-in, normalized by the Min-Max method, sorted according to the weight by calculating the weight, and the specific method is that for each index in each column, the proportion of the index in the column index, the entropy value and the difference coefficient are calculated one by one; then, the cumulative clustering is carried out, and the cumulative matrix D is accumulated according to the weight size direction value, as follows: First column: f 12 , f 12 + f 11 ,..., f 12 + f 11 +... + f 1m ; Second column: f 22 , f 22 + f 21 ,..., f 22 + f 21 +... + f 2m ; nth column: f n2 , f n2 + f n1 ,..., f n2 + f n1 +... + f nm ; The process of converting to a Boolean matrix is to accumulate any two rows x row and y row in matrix D; when the matrix value d x1 d y1 and d x2 d y2 and d x3 d y3 and…and d xm d ym ; PS(x)>PS(y); The Boolean matrix A is = [a xy ] n×n ; a xy =1, PS(x)>PS(y), i.e. the partial order comparison of the x-th row with the y-th row in the accumulation matrix D; a xy =0, PS(x)≯PS(y), i.e. the partial order comparison of the x-th row with the y-th row in the accumulation matrix D; constructing a skeleton matrix G based on the Boolean matrix B: B = (A + I); R = B (k+1) ; G = R - (R - I) 2 - I; I is an identity matrix.

2. The method of building a vuetify encapsulated message toast plugin according to claim 1, wherein, The message prompt component comprises: message prompt type, message prompt content, prompt time to disappear, custom icon, message prompt position, message prompt variant, message prompt dark theme, message prompt light theme, horizontal offset, vertical offset, whether to display the close button, whether to select the vuetify style, and the offset transition time when selecting the elementui style.

3. The method of building a vuetify encapsulated message toast plugin according to claim 1, wherein, In S3, the entry file is constructed and the first plug-in is imported, specifically, the plug-in is referenced by Import in the main.js file.

4. The method of building a vuetify encapsulated message toast plugin according to claim 1, wherein, In S2, the preset global component registration method is called in the page logic file, specifically: S21, initializing the storage timer and the variable of each message prompt; S22, using the basic vue constructor to render the component and instantiate the component for the variable; S23, if no parameter is passed to the instantiated component in S22, the vuetify style is used by default, since the message prompt of the vuetify style is a single instantiation component, first check whether the instantiation component exists in the container that stores the instantiation component, if the instantiation component exists in the container, remove and destroy the previous instantiation component, and then store the instantiation component in the container; S24, if the instantiation component of S22 is parameterized, first judge whether the timeout is "-1", if not "-1" then start a timer, when the timer reaches the time first clear the instantiation component DOM element, and then judge whether it is vuetify style, if not vuetify style, then traverse the container storing instantiation component, remove the first instantiation component and clear its corresponding timer, then calculate the remaining instantiation component offset down, then use the destroy component to destroy the instantiation component, clean up its connection with other instantiation components, unbind all its instructions and event listeners, if it is vuetify style, then return to step S23; S25, using the mounting module to manually mount the instantiation component and create the root DOM element used by the instantiation component, and then insert the root DOM element into the instantiation component.

5. The method of building a vuetify encapsulated message toast plugin according to claim 1, wherein, In S23, the process of selecting vuetify style is as follows: If no parameter is passed, the default is vuetify style. Since vuetify message prompt is a single instantiation component, when a message prompt is displayed, it will first judge whether there is an existing message prompt. If there is, the previous message prompt will be destroyed to ensure that only one instantiation component exists at all times. When vuetify transmits false, the elementui effect is adopted, allowing multiple instantiation components to exist, that is, saving each message prompt and the corresponding timer. Whenever a message prompt is displayed, the remaining message instantiation components will be offset down to achieve the elementui effect. The offset down here is achieved by calculating the position and setting the corresponding offsetY.

Images