Bilingual same-screen display implementation method and system, computer device and storage medium

Abstract

The application discloses a bilingual same-screen display implementation method and system, computer equipment and a storage medium, meta information is transmitted through a routing entry, wherein the meta information represents specific component information required to be displayed under a current routing component entry; a bilingual component is entered and bilingual component initialization is started, wherein the bilingual component comprises a left component and a right component, the bilingual component initialization comprises: parameters on a route are parsed and a computed attribute is triggered; after the bilingual component initialization is completed, the left component and the right component judge whether corresponding language components need to be displayed according to 2.c.ii.1-2 to obtain a display result; an is parameter is transmitted in a component component built in vue according to the display result, wherein the is parameter represents specific content required to be displayed by a current component, and the component component is a built-in component in vue.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of bilingual same-screen display implementation, and in particular to a bilingual same-screen display implementation method and system, a computer device and a storage medium. BACKGROUND

[0002] With the continuous advancement of economic globalization, many existing websites or mobile applications need to implement internationalization and support display in multiple different languages (such as English, Chinese, French, etc.).

[0003] Clinical systems have the business requirement of bilingual same-screen display, and not single-language same-screen display. Conventional writing of two sets of code cannot be maintained and updated, and there is no effective solution on the market to meet the business requirement of bilingual same-screen display of all page information of the system. SUMMARY

[0004] Therefore, in view of the above technical problems, a bilingual same-screen display implementation method, system, computer device and storage medium are provided to solve the problem that the existing solutions cannot meet the business requirement of bilingual same-screen display of all page information of the system.

[0005] In a first aspect, a bilingual same-screen display implementation method is provided, and the method comprises the following steps:

[0006] Routing entry meta information is transmitted, wherein the meta information represents specific component information that needs to be displayed under the current routing component entry;

[0007] A bilingual component is entered and bilingual component initialization is started, wherein the bilingual component comprises a left component and a right component, and the bilingual component initialization comprises parsing parameters on the route and triggering a computed property;

[0008] After the bilingual component initialization is completed, the left component and the right component judge whether the corresponding language component needs to be displayed according to 2.c.i i.1-2 to obtain a display result;

[0009] According to the display result, an i s parameter is transmitted in a component component in the vue, and the i s parameter represents specific content that needs to be displayed by the current component, wherein the component component is a built-in component in the vue.

[0010] In the above solution, optionally, the parameters on the route are parsed, and the parameters comprise:

[0011] A component name that needs to be displayed by the left component;

[0012] A component name that needs to be displayed by the right component;

[0013] The left component carries the route parameters brought by the jump from the outside world;

[0014] The right component carries the route parameters brought by the jump from the outside world.

[0015] In the above scheme, further optionally, the trigger calculation attribute comprises:

[0016] Obtain the identification data of whether the left component is displayed from the vuex;

[0017] Obtain the identification data of whether the right component is displayed from the vuex;

[0018] Obtain the language type displayed by the left component from the vuex;

[0019] Obtain the language type displayed by the right component from the vuex;

[0020] The vuex is a library used for centralized state management of vue, and if the attribute changes, all places using the attribute will change.

[0021] In the above scheme, further optionally, after the bilingual component initialization is completed, the left component and the right component judge whether the corresponding language component needs to be displayed according to 2.c.i i.1-2 to obtain a display result, including: if the left component identification is stored in the vuex, the display result is left component display, if the right component identification is stored in the vuex, the display result is right component display, and if the left and right identifications exist at the same time, the display result is bilingual display on the same screen.

[0022] In the above scheme, further optionally, according to the display result, the is parameter is passed in the component component built in vue, and the is parameter represents the content of the current component that needs to be displayed.

[0023] Call the target method, and the target method retrieves the component corresponding to the current component name in the meta information of itself, returns the component as a return value, and obtains the corresponding code file that needs to be displayed;

[0024] The is parameter obtains the corresponding component through the target method and is passed to the component;

[0025] The component receives the component and starts to directly display the display result.

[0026] In the above scheme, further optionally, the left component and the right component respectively pass the target attribute to all descendant components of themselves, and the target attribute value represents the current language environment information.

[0027] In the above solution, further optionally, the calling target method further comprises the following steps before the calling:

[0028] A data center is created in the left and right top components, and the data center stores data to be passed to the descendants;

[0029] A receive method is defined in the component, and the receive method is used to pass the language identifier in the data center in the left and right components to the component;

[0030] The receive option is declared in the component, and the receive method is called in the created or other initialization stage, and the required language environment is referenced to the component through the inheritProperties option, and the language environment information is injected into the component instance.

[0031] In a second aspect, a bilingual same-screen display implementation system, the system comprises:

[0032] A transition module is used to route entry meta information, wherein the meta information represents specific component information to be displayed under the current routing component entry;

[0033] An initialization module is used to enter the bilingual component and start initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initialization of the bilingual component includes parsing parameters on the route and triggering computed properties;

[0034] An output module is used to determine whether the corresponding language component needs to be displayed according to 2.c.ii.1-2 after the bilingual component is initialized, and a display result is obtained;

[0035] A display module is used to pass the is parameter in the component component in the vue according to the display result, wherein the is parameter represents the specific content to be displayed in the current component, and the component component is a built-in component in the vue.

[0036] In a third aspect, a computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the following steps when executing the computer program:

[0037] The routing entry meta information is input, wherein the meta information represents specific component information to be displayed under the current routing component entry;

[0038] Enter the bilingual component and start initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initializing the bilingual component includes: parsing parameters on a route and triggering a computed property;

[0039] After the bilingual component is initialized, the left component and the right component judge whether the corresponding language component needs to be displayed according to 2.c.i i.1-2, and obtain a display result;

[0040] According to the display result, an is parameter is passed in a component component built in the vue, and the is parameter represents specific content that needs to be displayed by the current component, wherein the component component is a built-in component in the vue.

[0041] In a fourth aspect, a computer readable storage medium has a computer program stored thereon, and the computer program is executed by a processor to implement the following steps:

[0042] The meta information is passed in the route entry, and the meta information represents specific component information that needs to be displayed under the current route component entry;

[0043] Enter the bilingual component and start initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initializing the bilingual component includes: parsing parameters on a route and triggering a computed property;

[0044] After the bilingual component is initialized, the left component and the right component judge whether the corresponding language component needs to be displayed according to 2.c.i i.1-2, and obtain a display result;

[0045] According to the display result, an is parameter is passed in a component component built in the vue, and the is parameter represents specific content that needs to be displayed by the current component, wherein the component component is a built-in component in the vue.

[0046] The present application has at least the following beneficial effects:

[0047] The present application is based on further analysis and research on the problems of the prior art, and realizes that the prior art cannot meet the business needs of bilingual display of all page information on the screen. The present application transmits meta information through a routing entry, wherein the meta information represents specific component information that needs to be displayed under the current routing component entry; enters a bilingual component and starts initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initializing of the bilingual component includes: parsing parameters on the route and triggering a computed property; after the bilingual component is initialized, the left component and the right component judge whether the corresponding language component needs to be displayed according to 2.c.i i.1-2 to obtain a display result; and according to the display result, an is parameter is transmitted in a component component built in vue, wherein the component component is a built-in component in vue, and the is parameter represents specific content that needs to be displayed by the current component.

[0048] In the initialization stage of the bilingual component, the present application parses the routing parameters and calculates the properties; and provides the CustomLanguage attribute of the bilingual component to all descendant components respectively. The bilingual display effect of one set of code can be realized, the data receiving method and the attribute injection method are combined for use, the data transmission and injection process can be more flexibly controlled, the complexity of the business logic in the component is reduced, and the readability and maintainability of the code are improved. BRIEF DESCRIPTION OF DRAWINGS

[0049] Figure 1 A flowchart of a bilingual display implementation method provided by an embodiment of the present application is shown in the figure;

[0050] Figure 2 A component module diagram of the bilingual display implementation method provided by an embodiment of the present application is shown in the figure;

[0051] Figure 3 A specific flowchart of the bilingual display implementation process in an embodiment of the present application is shown in the figure;

[0052] Figure 4 An internal structure diagram of a computer device in an embodiment is shown in the figure. DETAILED DESCRIPTION

[0053] In order to make the purposes, technical solutions and advantages of the present application clearer, the present application is further described in detail below with reference to the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application, and are not used to limit the present application.

[0054] The bilingual display implementation method provided by the present application includes the following steps:

[0055] The route entry transmits meta information, wherein the meta information represents specific component information to be displayed under the current route component entry;

[0056] Enter the bilingual component and start initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initializing the bilingual component includes parsing parameters on the route and triggering a computed property;

[0057] After the bilingual component is initialized, the left component and the right component determine whether the corresponding language component needs to be displayed according to 2.c.ii.1-2, to obtain a display result;

[0058] According to the display result, an is parameter is passed through a component component built in vue, wherein the is parameter represents specific content to be displayed by the current component, and the component component is a built-in component in vue.

[0059] In one embodiment, the parsing of the parameters on the route includes:

[0060] A component name to be displayed by the left component;

[0061] A component name to be displayed by the right component;

[0062] A route parameter carried by the left component when jumping in from the outside;

[0063] A route parameter carried by the right component when jumping in from the outside.

[0064] In one embodiment, the triggering of the computed property includes:

[0065] Obtaining identification data of whether the left component is displayed from vuex;

[0066] Obtaining identification data of whether the right component is displayed from vuex;

[0067] Obtaining a language type to be displayed by the left component from vuex;

[0068] Obtaining a language type to be displayed by the right component from vuex;

[0069] The vuex is a library used for centralized state management of vue, and if a property therein changes, all places using the property will change.

[0070] In one embodiment, after the bilingual component initialization is completed, the left component and the right component determine whether the corresponding language component needs to be displayed according to 2.c.ii.1-2, and obtain a display result, including: if the left component identifier is stored in the vuex, the display result is left component display; if the right component identifier is stored in the vuex, the display result is right component display; if the left and right identifiers exist at the same time, the display result is bilingual display on the same screen.

[0071] In one embodiment, the is parameter is passed in the component component in the vue according to the display result, and the is parameter represents the content that needs to be displayed by the current component, including:

[0072] A target method is called, the target method retrieves the component corresponding to the current component name in the meta information of the target method, and returns the component as a return value, and obtains a code file corresponding to the content that needs to be displayed;

[0073] The is parameter obtains the corresponding component through the target method, and is passed to the component;

[0074] The component receives the component and directly displays the display result.

[0075] In one embodiment, the left component and the right component respectively pass a target attribute to all descendant components of the left component and the right component, and the target attribute value represents the current language environment information.

[0076] In one embodiment, before the target method is called, it further includes:

[0077] A data center is created in the left and right top components, and the data center stores the data that needs to be passed to the descendants;

[0078] A receive method is defined in the component; the receive method is used to pass the language identifier in the data center in the left and right components to the component;

[0079] The receive option is declared in the component, and the receive method is called in the created or other initialization stage, the language environment that needs to be passed is referenced to the component through the inheritProperties option, and the language environment information is injected into the component instance.

[0080] In this embodiment, the route entry transmits meta information, wherein the meta information represents specific component information to be displayed under the current route component entry; a bilingual component is entered and initialization of the bilingual component is started, wherein the bilingual component includes a left component and a right component, and the initialization of the bilingual component includes: parsing parameters on the route and triggering a computed property; after the bilingual component is initialized, the left component and the right component determine whether the corresponding language component needs to be displayed according to 2.c.ii.1-2 to obtain a display result; the is parameter representing the specific content to be displayed in the current component is transmitted through the built-in component component in the vue according to the display result, wherein the component component is a built-in component in the vue. In the bilingual component initialization stage, the route parameter is parsed and the attribute is calculated; the CustomLanguage attribute of the bilingual component is transmitted to all descendant components through provide. The method can realize the effect of presenting one set of code in multiple languages, and the combination of the data receiving method and the attribute injection method can be used more flexibly to control the data transmission and injection process, reduce the complexity of the internal business logic of the component, and improve the readability and maintainability of the code.

[0081] In one embodiment, as shown in Figures 2-3 a bilingual component is developed from zero to one, the effect of presenting one set of code in multiple languages can be realized, and theoretically, n languages can be displayed on the same screen; first, the route entry (a collection of information of all pages of vue, and each piece of information can be brought in by the meta attribute) transmits meta information, and the meta information represents the specific page to be displayed under the current route (each page is stored under the current route)

[0082] In one embodiment, the bilingual component is entered, and the bilingual component is initialized, and the parameters on the route are parsed (here, the entered is one of the routes represented by 2.a), wherein the parameters include:

[0083] the component name to be displayed by the left component; the component name to be displayed by the right component; the route parameter carried by the left component through external jumping; and the route parameter carried by the right component through external jumping.

[0084] In one embodiment, a computed property is triggered, which includes:

[0085] the identification data of whether the left component is displayed is obtained from the vuex;

[0086] the identification data of whether the right component is displayed is obtained from the vuex;

[0087] the language type to be displayed by the left component is obtained from the vuex;

[0088] Get the language type of the right component from vuex;

[0089] Note: vuex is a library used for centralized state management in vue. When the properties in it change, all places that use the properties will change

[0090] After the initialization of the bilingual component, the corresponding left and right components will determine whether to display the corresponding language component according to 2.c.i i.1-2. If the left component identifier is stored in vuex, the left component will be displayed. The right component is the same. If both left and right identifiers exist, they will be displayed on the same screen.

[0091] In one embodiment, the is parameter is then passed through the component component in vue. The is parameter represents the content that the current component needs to display. A method is called, and a parameter is passed to the method, which is the current component name obtained through 2.c.i.1-2.

[0092] Note: component is a built-in component in vue. This component can pass a component, and the component will render it. It can be operated from the outside.

[0093] In one embodiment, the current component name is retrieved from the meta information in the method, and the component corresponding to the current component name is returned as a return value. Here you can get the corresponding code file that needs to be displayed

[0094] In one embodiment, the is parameter obtains the corresponding component by calling the method and passes it to component; component receives the component and starts to display directly.

[0095] In one embodiment, how to identify the current language environment information in the nested subcomponents:

[0096] The left and right components respectively pass an attribute to all their descendant components, and the attribute value represents the current language environment information. Then all the descendant components receive this attribute and know their current language environment information. When the method is called to translate the specific translation place in the component, the method can read the current specific language environment information to realize the corresponding translation.

[0097] In one embodiment, the specific transmission method and process:

[0098] First, create a data center in the left and right top-level components, which will store the data that needs to be passed to the descendants. For example, you can use a js object (key-value pair) to implement the data center, the key name represents the name of the data, and the key value represents the value of the data, such as {name:'something', age: 18}.

[0099] Define a receive method inside the component. This method is used to pass the language identifier in the data center (dataCenter) in the left and right components to the component. This method accepts a component instance (component) as a parameter, which is the current descendant component, and then gets the property name (here it refers to the key of the language identifier) that needs to be injected from the inheritProperties option of the component instance. Then compare these property names with the keys in the left and right components. If the language identifier corresponding to the key exists, pass the language identifier through the existing property in the component instance (that is, the property declared in inheritProperties) to the component. The main implementation is to traverse and check whether the property name in the inheritProperties option exists in the data center. If it exists, pass its data through the component's property to the component.

[0100] Declare the receive option in the component and call the receive method in the created or other initialization stage. The language environment information that needs to be passed through the inheritProperties option is referenced to the component. These language environment information will be injected into the component instance, so it can be used in the component.

[0101] This transmission method solves the technical difficulty that the descendant component cannot obtain the current language environment information when implementing bilingual same screen in the patent. The innovation lies in the design and use of the data center. By creating a data center in the top-level component to store the data that needs to be passed to the descendant component, the process of data transmission through component nesting is avoided, and the coupling relationship between components is simplified. In addition, the combination of the receive data method and the attribute injection method can more flexibly control the data transmission and injection process, reduce the complexity of the business logic inside the component, and improve the readability and maintainability of the code.

[0102] It should be understood that, although Figure 1 The steps in the flowchart are displayed in sequence according to the direction of the arrow, but these steps are not necessarily executed in the order indicated by the arrow. Unless explicitly stated in this article, there is no strict order restriction for the execution of these steps, and these steps can be executed in other order. Moreover, Figure 1At least one of the steps in the method can comprise a plurality of steps or stages which are not necessarily performed at the same time but can be performed at different times and which are not necessarily performed in the order given but can be performed alternately or in rotation with at least one of the other steps or the steps or stages of the other steps.

[0103] In one embodiment, a bilingual same-screen display implementation system is provided, comprising the following program modules:

[0104] A transition module is configured to route entry meta information, wherein the meta information represents specific component information to be displayed under the current routing component entry;

[0105] An initialization module is configured to enter a bilingual component and start initializing the bilingual component, wherein the bilingual component comprises a left component and a right component, and the initializing the bilingual component comprises: parsing parameters on the route and triggering computed properties;

[0106] An output module is configured to, after the bilingual component is initialized, determine whether the left component and the right component need to display corresponding language components according to 2.c.i i.1-2, to obtain a display result;

[0107] A display module is configured to, according to the display result, pass an is parameter through a component component built in vue, wherein the is parameter represents specific content to be displayed by the current component, and the component component is a built-in component in vue.

[0108] The specific limitations of the bilingual same-screen display implementation system can be referred to the limitations of the bilingual same-screen display implementation method in the foregoing, and will not be repeated here. Each module in the bilingual same-screen display implementation system can be realized by software, hardware, or a combination thereof. Each module can be embedded in or independent of the processor in the computer device in hardware form, or can be stored in the memory in the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0109] In one embodiment, a computer device is provided, which can be a terminal, and the internal structure diagram of the computer device can be as shown in Figure 4As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input system connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operating system and the computer program in the non-volatile storage medium to run. The communication interface of the computer device is used to communicate with external terminals in a wired or wireless manner. Wireless mode can be achieved through WI FI, operator network, NFC (near field communication) or other technologies. The computer program is executed by the processor to implement a kind of bilingual screen display implementation method. The display screen of the computer device can be liquid crystal display screen or electronic ink display screen, and the input system of the computer device can be touch layer covered on the display screen, or key, trackball or touchpad arranged on the shell of the computer device, or external keyboard, touchpad or mouse etc.

[0110] Those skilled in the art can understand that, Figure 4 The structure shown in the figure is only a block diagram of part of the structure related to the scheme of the present application, and does not constitute a limitation on the computer device to which the scheme of the present application is applied. The specific computer device can include more or fewer components than those shown in the figure, or combine certain components, or have a different component arrangement.

[0111] In one embodiment, a computer device is provided, including a memory and a processor, the memory stores a computer program, which relates to all or part of the processes in the above-mentioned embodiment methods.

[0112] In one embodiment, a computer readable storage medium is provided, which stores a computer program, which relates to all or part of the processes in the above-mentioned embodiment methods.

[0113] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer readable storage medium, and when executed, can include the processes of the above-mentioned embodiment methods. Any reference to memory, storage, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory or optical memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration but not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM).

[0114] Any combination of the technical features of the above embodiments can be made. In order to make the description simple, all possible combinations of the technical features in the above embodiments are not described, but as long as the combination of the technical features does not exist, it should be considered as the scope of the present application.

[0115] The above embodiments only express several implementation manners of the present application, and the description is more specific and detailed, but it should not be understood as a limitation on the scope of the patent. It should be pointed out that for those skilled in the art, without departing from the concept of the present application, some modifications and improvements can be made, which are all within the protection scope of the present application. Therefore, the protection scope of the patent of the present application should be subject to the appended claims.

Claims

1. A method for implementing bilingual simultaneous screen display, characterized in that, The method includes: The route entry passes in meta information, where the meta information represents the specific component information to be displayed under the current route component entry; Enter the bilingual component and begin initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initialization of the bilingual component includes: parsing parameters on the route and triggering computed properties; After the bilingual component is initialized, it is determined whether the corresponding language component needs to be displayed, and the display result is obtained. Based on the displayed results, the is parameter is passed through the built-in component in Vue. The is parameter represents the specific content that the current component needs to display. The component is a built-in component in Vue.

2. The method according to claim 1, characterized in that, The parameters on the resolved route include: The name of the component to be displayed in the left component; The name of the component that the right component needs to display; The routing parameters carried by the left component when it is navigated in from the outside; The routing parameters carried by the right component when it is redirected from the outside.

3. The method according to claim 1, characterized in that, The triggering calculation attribute includes: By retrieving the identifier data from Vuex indicating whether the left component is displayed; By retrieving the identifier data from Vuex indicating whether the right component is displayed; The language type displayed by the left component can be obtained from Vuex; Get the specific language type displayed by the right component from Vuex; Here, Vuex is a library used by Vue for centralized state management. If a property in Vue changes, all places that use that property will also change.

4. The method according to claim 3, characterized in that, After the bilingual component is initialized, a determination is made as to whether the corresponding language component needs to be displayed, and the display result is obtained. This includes: if the vuex contains an identifier for the left component, then the display result is the display of the left component; if the vuex contains an identifier for the right component, then the display result is the display of the right component; if both left and right identifiers exist, then the display result is the bilingual display on the same screen.

5. The method according to claim 1, characterized in that, The `is` parameter is passed through a built-in component in Vue based on the displayed result. The `is` parameter represents the specific content that the current component needs to display, including: The target method is called. The target method internally retrieves the component corresponding to the current component name from its own meta information and returns this component as the return value to obtain the corresponding code file to be displayed. The `is` parameter obtains the corresponding component through the target method and passes it to the component. The component receives the component and begins to directly display the result.

6. The method according to claim 5, characterized in that, The left and right components each pass target attribute values ​​to all their descendant components, and these target attribute values ​​represent the current locale information.

7. The method according to claim 5, characterized in that, The process before invoking the target method also includes: Create a data center within the left and right top-level components; the data center will store the data that needs to be passed on to future generations. Define a receive method inside the component; the receive method is used to pass the language identifier in the data center of the left and right components to the component; Declare the `receive` option in the component and call the `receive` method during `created` or other initialization phases. The required locale will be referenced in the component through the `inheritProperties` option, and this locale information will be injected into the component instance. Here, `inheritProperties` is an inherited property.

8. A bilingual simultaneous screen display system, characterized in that, The system includes: The input module is used to pass in meta information for route entries, where the meta information represents the specific component information to be displayed under the current route component entry; Initialization module: used to enter the bilingual component and start initializing the bilingual component, wherein the bilingual component includes a left component and a right component, and the initialization of the bilingual component includes: parsing parameters on the route and triggering computed properties; Output module: After the bilingual component initialization is complete, it determines whether the corresponding language component needs to be displayed and obtains the display result; Display module: Used to pass the is parameter through a built-in component in Vue based on the display result. The is parameter represents the specific content that the current component needs to display. The component is a built-in component in Vue.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

Images