Interval selection method and device, electronic equipment and readable storage medium

Abstract

The invention discloses an interval selection method and device, electronic equipment and a computer readable storage medium. The method is applied to a first component in an Element-UI component library of Vue2, and comprises the following steps: in response to a click operation on an interval selection box in a user interface, displaying an interval selection interface on the user interface; the interval selection box and the interval selection interface are manufactured based on the first component, and the interval selection interface comprises a first selection area and a second selection area; in response to a first click operation in the second selection area, recording a first unit value; in response to a second click operation in the second selection area, recording a second unit value; generating a first interval based on the first unit value and the second unit value, and displaying the first interval to an interval selection box; according to the method, only one first component is needed to generate one interval selection box, and the first interval is displayed in the interval selection box, so that the display area is reduced, a user does not need to click and select other numerical values again in an additional component, the one-time operation amount is reduced, and the operation is more convenient.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interval selection method, device, electronic device and computer-readable storage medium. Background Art

[0002] With the development of Internet technology, web pages and software user interfaces are integrating more and more functions. Therefore, it is necessary to display enough information in the smallest possible area and streamline the user interfaces of web pages and software. At the same time, users' requirements for the user interfaces of web pages and software are no longer limited to having basic functions, but they also have higher requirements for the convenience of various functions on the user interface.

[0003] In the prior art, when using the Element-UI component library of Vue2 (Vue.js2.x) to create a web page or software user interface, two components are required to realize the interval selection for date and month, such as Figure 1 and Figure 2 As shown, a large amount of the user interface is occupied, and the user needs to select values ​​in different components respectively to realize the interval selection. Summary of the invention

[0004] The embodiments of the present application provide an interval selection method, device, electronic device and storage medium to solve the problem that when using the Element-UI component library of Vue2, two components are required to achieve interval selection, resulting in a large amount of user interface being occupied and requiring users to make multiple selections, which is cumbersome.

[0005] On the one hand, an embodiment of the present application provides an interval selection method, which is applied to a first component in an Element-UI component library of Vue2, including:

[0006] In response to a click operation on an interval selection box in a user interface, an interval selection interface is displayed on the user interface; wherein the interval selection box and the interval selection interface are made based on the first component, and the interval selection interface includes a first selection area and a second selection area, the first selection area is used to display an interval range, and the second selection area is used to display a unit value corresponding to the interval range;

[0007] In response to a first click operation on the second selection area, recording a first unit value corresponding to the first click operation;

[0008] In response to a second click operation on the second selection area, determining whether a second unit value corresponding to the second click operation is greater than the first unit value;

[0009] If the second unit value is greater than the first unit value, recording the second unit value;

[0010] A first interval is generated based on the first unit value and the second unit value, and the first interval is displayed in the interval selection box, wherein the first interval includes the first unit value and the second unit value.

[0011] Optionally, after generating the first interval, the method further includes:

[0012] In response to a third click operation on the second selection area, determining whether the unit value corresponding to the third click operation is the first unit value or the second unit value;

[0013] If the unit value corresponding to the third click operation is not the first unit value or the second unit value, the third click operation is not responded to;

[0014] If the unit value corresponding to the third click operation is the first unit value or the second unit value, the first unit value or the second unit value corresponding to the third click operation is cancelled.

[0015] Optionally, after generating the first interval, the method further includes:

[0016] In response to a third click operation on the second selection area, determining whether the first unit value and the second unit value are continuous;

[0017] If the first unit value and the second unit value are continuous, determining the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation from among the first unit value and the second unit value; and

[0018] The first unit value or the second unit value that is most adjacent to the third unit value corresponding to the third click operation is cancelled.

[0019] Optionally, recording the first unit value and the second unit value to a storage queue;

[0020] The process of generating a first interval based on the first unit value and the second unit value and displaying the first interval to the interval selection box includes:

[0021] Determining whether the storage queue includes the first unit value and the second unit value;

[0022] If the storage queue includes the first unit value and the second unit value, determining whether the first unit value and the second unit value in the storage queue are continuous;

[0023] If the first unit value and the second unit value are discontinuous, determining whether the storage queue stores the discontinuous first unit value and the second unit value for the first time;

[0024] If the storage queue stores the first unit value and the second unit value which are not continuous for the first time, traverse the unit values ​​within the interval and store the unit values ​​between the first unit value and the second unit value into the storage queue;

[0025] The first interval is generated according to the first unit value and the second unit value and the unit value between the first unit value and the second unit value stored in the storage queue, and the first interval to the interval selection box are displayed.

[0026] Optionally, the method further includes recording a first unit value corresponding to the first click operation, displaying the first unit value in a first display mode, and displaying a unit value smaller than the first unit value in a second display mode;

[0027] After recording the second unit value, displaying the second unit value in the first display mode, and displaying a unit value greater than the second unit value in the second display mode;

[0028] After the first interval is generated, the unit values ​​within the first interval are displayed in a third display manner.

[0029] Optionally, after the user interface displays the interval selection interface, the method further includes:

[0030] In response to a fourth click operation corresponding to the interval range switching button in the first selection area, the interval range displayed in the first selection area is switched, and at the same time, the unit value corresponding to the interval range in the second selection area is switched.

[0031] On the one hand, an embodiment of the present application provides an interval selection device, which is applied to a first component in an Element-UI component library of Vue2, including:

[0032] An interval selection interface display module, configured to display an interval selection interface on the user interface in response to a click operation on an interval selection box in the user interface; wherein the interval selection box and the interval selection interface are made based on the first component, and the interval selection interface includes a first selection area and a second selection area, the first selection area is used to display an interval range, and the second selection area is used to display a unit value corresponding to the interval range;

[0033] A first value recording module, configured to, in response to a first click operation on the second selection area, record a first unit value corresponding to the first click operation;

[0034] A first value determination module, configured to, in response to a second click operation on the second selection area, determine whether a second unit value corresponding to the second click operation is greater than the first unit value;

[0035] A second value recording module, configured to record the second unit value if the second unit value is greater than the first unit value;

[0036] The interval display module is used to generate a first interval based on the first unit value and the second unit value and display the first interval to the interval selection box.

[0037] Optionally, also include:

[0038] a second value determination module, configured to, in response to a third click operation on the second selection area, determine whether the unit value corresponding to the third click operation is the first unit value or the second unit value;

[0039] a disabling module, configured to not respond to the third click operation if the unit value corresponding to the third click operation is not the first unit value or the second unit value;

[0040] The first canceling module is used to cancel the recording of the first unit value or the second unit value corresponding to the third click operation if the unit value corresponding to the third click operation is the first unit value or the second unit value.

[0041] On the one hand, an embodiment of the present application provides an electronic device, which includes a processor and a memory, wherein the memory stores program code, and when the program code is executed by the processor, the processor executes any of the above-mentioned interval selection methods.

[0042] On the one hand, the present application provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute any of the above-mentioned interval selection methods.

[0043] The beneficial effects of this application are as follows:

[0044] The embodiment of the present application provides an interval selection method, device, electronic device and computer-readable storage medium. Among them, the interval selection method is applied to the first component in the Element-UI component library of Vue2, including: in response to a click operation on the interval selection box in the user interface, the interval selection interface is displayed in the user interface; wherein the interval selection box and the interval selection interface are made based on the first component, and the interval selection interface includes a first selection area and a second selection area, the first selection area is used to display the interval range, and the second selection area is used to display the unit value corresponding to the interval range; in response to the first click operation in the second selection area, the first unit value corresponding to the first click operation is recorded; in response to the second click operation in the second selection area, it is determined whether the second unit value corresponding to the second click operation is greater than the first unit value; if the second unit value is greater than the first unit value, the second unit value is recorded; based on the first unit value and the second unit value, a first interval is generated and the first interval to the interval selection box is displayed. In this way, only one first component is needed to generate an interval selection box in the user interface. After the user clicks the interval selection box, he can select the first unit value and the second unit value in the interval selection interface displayed subsequently, and the first interval established based on the first unit value and the second unit value can be displayed in the interval selection box, thereby reducing the display area on the interface. At the same time, the user does not need to click again in other components to select other values, thereby reducing the amount of operation and being more convenient.

[0045] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the written description, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0047] Figure 1 This is a schematic diagram of an application scenario in an embodiment of the present application;

[0048] Figure 2 This is a flow chart of an implementation of an interval selection method in an embodiment of the present application;

[0049] Figure 3 This is a schematic diagram of a user interface in an embodiment of the present application;

[0050] Figure 4 This is a schematic diagram of an interval selection box code in an embodiment of the present application;

[0051] Figure 5 This is another schematic diagram of a user interface in an embodiment of the present application;

[0052] Figure 6 This is another code diagram of an interval selection box in an embodiment of the present application;

[0053] Figure 7 This is another schematic diagram of a user interface in an embodiment of the present application;

[0054] Figure 8 This is another code diagram of an interval selection box in an embodiment of the present application;

[0055] Fig. 9 This is another schematic diagram of a user interface in an embodiment of the present application;

[0056] Fig.10 This is a schematic diagram of the structure of a section selection device in an embodiment of the present application;

[0057] Fig.11 A schematic diagram of the hardware structure of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0058] In order to make the purpose, technical scheme and advantages of the present application clearer, the technical scheme in the embodiment of the present application will be clearly and completely described below in conjunction with the drawings in the embodiment of the present application. Obviously, the described embodiment is only a part of the embodiment of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application. In the absence of conflict, the embodiments in the present application and the features in the embodiments can be arbitrarily combined with each other. In addition, although the logical order is shown in the flow chart, in some cases, the steps shown or described can be performed in an order different from that here.

[0059] The terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the invention described herein can be implemented in sequences other than those illustrated or described herein.

[0060] When the Element-UI component library of Vue2 is used to create a user interface for a web page or software, two components are required to realize the interval selection for the date and month, such as Figure 1 and Figure 2 As shown, a large amount of user interface is occupied. Meanwhile, the user needs to select values ​​in different components respectively to select the interval, and the display in year or other scenarios cannot be realized.

[0061] In view of this, embodiments of the present application provide a range selection method, device, electronic device, and computer-readable storage medium.

[0062] The preferred embodiments of the present application are described below in conjunction with the drawings in the specification. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present application, and are not used to limit the present application. In addition, the embodiments and features in the embodiments of the present application may be combined with each other if there is no conflict.

[0063] like Figure 1 , which is a schematic diagram of an application scenario provided by an embodiment of the present application. In the schematic diagram of the application scenario, a terminal device 101 and a server 102 are included. The terminal device 101 and the server 102 communicate with each other through a communication network.

[0064] The terminal device 101 is an electronic device used by the target object, and the electronic device may be a personal computer, a mobile phone, a tablet computer, a notebook, an e-book reader, a vehicle-mounted terminal, etc. In addition, a client related to interval selection may be installed on the terminal device 101, and the client may be software (for example, an APP, a browser, etc.), or a web page, a small program, etc. The target object may use the above-mentioned client related to interval selection through the terminal device 101 to perform interval selection related operations.

[0065] The server 102 may be an independent physical server or an edge device 102 in the field of cloud computing. It may also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud storage, cloud functions, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (English name: Content Delivery Network, abbreviated as CDN), as well as big data and artificial intelligence platforms.

[0066] There is no restriction on the number of the terminal devices 101 and / or servers 102 .

[0067] It should be noted that the interval selection method in the embodiment of the present application can be executed by the terminal device 101 or the server 102 alone, or can be executed jointly by the terminal device 101 and the server 102. For example, when executed jointly by the terminal device 101 and the server 102, the server 102 can receive a click operation on the target object; then, according to the click operation, the corresponding unit value is recorded, and the corresponding first interval is generated according to the unit value selected by the click operation, and the terminal device 102 can receive the first interval and display it to the user in the interval selection box.

[0068] The following describes the interval selection method provided by the exemplary embodiment of the present application in combination with the above application scenarios and with reference to the accompanying drawings. It should be noted that the above application scenarios are only shown to facilitate understanding of the spirit and principles of the present application, and the implementation of the present application is not limited in this regard.

[0069] refer to Figure 2 , is an implementation flow chart of an interval selection method provided in an embodiment of the present application, which is applied to the first component in the Element-UI component library of Vue2. The specific implementation process of the method is as follows:

[0070] S11: In response to a click operation on the interval selection box 11 in the user interface 1, an interval selection interface 12 is displayed in the user interface 1; wherein the interval selection box 11 and the interval selection interface 12 are made based on the first component, and the interval selection interface 12 includes a first selection area 121 and a second selection area 122, the first selection area 121 is used to display the interval range, and the second selection area 122 is used to display the unit value corresponding to the interval range.

[0071] In the user interface 1, an interval selection box 11 generated by a single first component is displayed. After the user clicks the interval selection box 11, an interval selection interface 12 pops up. The interval selection interface 12 includes a first selection area 121 and a second selection area 122. The first selection area 121 displays an interval range, and the second selection area 122 displays the unit value of the interval range. For example, in the year selection scenario, Figure 3 As shown, a 10-year interval from 2030 to 2039 can be displayed, and the unit value is each year. The second selection area 122 will display each specific year within the 10 years from 2030 to 2039.

[0072] In addition, the interval selection interface 12 can be displayed below the interval selection box 11, and the first selection area 121 in the interval selection interface 12 is above the second selection area 122. The interval selection interface 12 may not overlap with the interval selection box 11. Of course, the interval selection interface 12 and the specific display position and the distribution of the first selection area 121 and the second selection area 122 in the interval selection interface 12 can be set according to the specific situation and are not limited here.

[0073] Among them, see Figure 4 As shown, the el-date-picker component is used in the Element-UI component library of Vue2, the picker-options option is added, and the interval selection box 11 and the interval selection interface 12 in the user interface 1 are added.

[0074] S12 : In response to the first click operation 31 in the second selection area 122 , a first unit value corresponding to the first click operation 31 is recorded.

[0075] After the user clicks on a unit value in the second selection area 122, the first unit value corresponding to the first click operation 31 is recorded based on the click operation, that is, the first click operation 31, to determine that the user has selected the first unit value for the first time. In the year interval selection scenario, the first unit value may be a specific year. In the date or other value scenarios, the first unit value may be a specific number of a month or other unit values.

[0076] S13: In response to the second click operation 32 in the second selection area 122, it is determined whether the second unit value corresponding to the second click operation 32 is greater than the first unit value.

[0077] Since the user has performed the first click operation 31, the first unit value is used as the starting value of the interval. It is necessary to determine whether the second unit value corresponding to the second click operation 32 is greater than the first unit value. If it is less, the click operation is invalid and the second unit value corresponding to the second click operation 32 is not recorded to avoid errors in the operation of the first component.

[0078] S14: If the second unit value is greater than the first unit value, the second unit value is recorded.

[0079] The second unit value is recorded only after the second unit value is greater than the first unit value, so as to subsequently generate the first interval according to the first unit value and the second unit value.

[0080] S15 : generating a first interval based on the first unit value and the second unit value and displaying the first interval to the interval selection box 11 .

[0081] See also Figure 5As shown, after selecting the first unit value and the second unit value, the first interval is generated and displayed in the interval selection box 11. The display method can be as follows Figure 5 All unit values ​​in the first interval are directly displayed as shown, or they can be displayed in the abbreviated form of 2031-2036, which can be set according to specific circumstances. The display mode of the first interval in the interval selection box 11 is not limited. The first interval is an open interval, including the first unit value and the second unit value, and the unit value between the first unit value and the second unit value.

[0082] In some implementations, after the first interval is generated in S15, S21 to S23 may be further included.

[0083] S21: In response to a third click operation on the second selection area 122, determining whether the unit value corresponding to the third click operation is the first unit value or the second unit value;

[0084] S22: if the unit value corresponding to the third click operation is not the first unit value or the second unit value, then the third click operation is not responded to;

[0085] S23: If the unit value corresponding to the third click operation is the first unit value or the second unit value, cancel recording the first unit value or the second unit value corresponding to the third click operation.

[0086] After the second click operation 32, the user may continue to click due to various circumstances, such as the need to reselect the interval. At this time, it can be determined whether the unit value corresponding to the third click operation is the first unit value or the second unit value. If the unit value corresponding to the third click operation is not the first unit value or the second unit value, it may be that the user accidentally clicked on other unit values, or that an erroneous operation caused the user to click on other unit values. At this time, if Figure 6As shown in the code shown, the third click operation is not responded to to avoid errors in the first component. If the unit value corresponding to the third click operation is the first unit value or the second unit value, the first unit value or the second unit value corresponding to the third click operation is canceled, and it is considered that the user needs to reproduce the starting point or end point of the selection interval. After that, the user can click again in the second selection area 122 to select a new unit value as the new first unit value or the second unit value. For example, the first unit value has been recorded as 2031 and the second unit value is 2036. If the first unit value 2031 is clicked for the third time, the second unit value 2036 is still retained at this time, and the previously recorded first unit value 2031 is canceled so that the user can re-select the starting year of the first interval. Similarly, if the second unit value 2036 is clicked for the third time, the previously recorded second unit value 2036 is canceled so that the user can re-select the ending year of the first interval.

[0087] Furthermore, in the scenario of selecting a year in a range, the third click operation is not responded to. Figure 6 As shown in the figure, the value returned by disabledDate is the basis for determining whether the selected item in the current component is disabled. If it returns true, the year in the current component will be disabled. Returning other values ​​will not affect the disablement. When the user operates the first component, each interaction is a click operation, including the first load, each time a year is selected or deselected. In order to prevent the user from clicking on a year other than the selected year and entering some subsequent looping logic, a judgment is made here, and only the years selected by the user are processed, that is, if(otherYears<arr[0]||otherYears> The line of code arr.at(-1))return true selects the return Boolean value true outside the range, directly disables it, and does not enter the subsequent logical processing, which can prevent stack overflow and cause performance problems in the browser and other components that host the software.

[0088] This embodiment facilitates the user to reselect the starting unit value and the ending unit value of the first interval, and does not respond to the user's operation of clicking other unit values, thereby avoiding errors in the first component.

[0089] In an embodiment, after S15 generates the first interval, S31 and S32 may also be included.

[0090] S31: In response to a third click operation on the second selection area 122, determining whether the first unit value and the second unit value are continuous.

[0091] S32: If the first unit value and the second unit value are continuous, determine the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation from the first unit value and the second unit value; and cancel the record of the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation.

[0092] Usually, the first interval does not only include the first unit value and the second unit value. Therefore, when the first unit value and the second unit value recorded by the user's first click operation 31 and the second click operation 32 are adjacent and continuous values, this is usually because the user clicked incorrectly when performing the first click operation 31 or the second click operation 32. Therefore, this time can be treated specially. At this time, when the user performs the third click operation, the starting unit value or the ending unit value of the first interval can be directly canceled, that is, the first unit value or the second unit value can be directly canceled. After receiving the third click operation, it is determined that the first unit value and the second unit value are adjacent and continuous values. Then, the first unit value or the second unit value closest to the third unit value corresponding to the third click operation is determined from the first unit value and the second unit value, and the first unit value or the second unit value closest to the third unit value corresponding to the third click operation is canceled. Figure 7 and Figure 3 As shown, Figure 7 In the example, the first unit value is 2032, and the second unit value is 2033. At this time, the first unit value and the second unit value are adjacent and continuous. At this time, if the user selects any year after 2033, the second unit value closest to the third unit value is cancelled, and the user interface 1 is changed to Figure 7 The status changes to Figure 3 state.

[0093] The above embodiment further facilitates the user to quickly reselect the starting unit value and the ending unit value of the first interval, thereby facilitating user operation and experience.

[0094] It should be noted that after canceling the record of the first unit value or the second unit value, the user performs a click operation again, which is still called the first click operation 31 or the second click operation 32, and enters the first unit value or the second unit value, wherein the first and second in the first click operation 31, the second click operation 32, the first unit value and the second unit value are only used to distinguish different operations and different values, and do not limit the order and specific values, but are only operation names corresponding to different situations.

[0095] Further, based on the aforementioned embodiment, the first unit value and the second unit value may be recorded in a storage queue. At this time, the above-mentioned S15 process of generating a first interval based on the first unit value and the second unit value and displaying the first interval to the interval selection box 11 may include S151 to S155.

[0096] S151: Determine whether the storage queue includes the first unit value and the second unit value.

[0097] In the process of generating the first interval, the first unit value and the second unit value can be stored in the storage queue. Only when the storage queue includes two values, namely the first unit value and the second unit value, can it be determined that the storage queue already has the starting unit value and the ending unit value of the first interval selected by the user, and the interval generation step can be further performed.

[0098] S152: If the storage queue includes the first unit value and the second unit value, determine whether the first unit value and the second unit value in the storage queue are continuous.

[0099] At the same time, it is necessary to further determine whether the first unit value and the second unit value are continuous. If they are not continuous, it is necessary to determine the unit value between the first unit value and the second unit value, so as to determine other unit values ​​in the first interval.

[0100] S153: If the first unit value and the second unit value are discontinuous, determine whether it is the first time that the discontinuous first unit value and second unit value are stored in the storage queue.

[0101] After determining whether the first unit value and the second unit value are continuous, it is also necessary to determine whether this is the first time that the discontinuous first unit value and the second unit value are stored in the storage queue, so as to avoid the situation where the unit value between the first unit value and the second unit value is recognized as adding or modifying the starting unit value or the ending unit value of the first interval when adding the unit value between the first unit value and the second unit value in the storage queue. After the first unit value and the second unit value are recorded in the storage queue for the first time, it is recorded as the first time that the discontinuous first unit value and the second unit value are stored. If the first unit value or the second unit value is cancelled, the mark used to record whether this is the first time that the discontinuous first unit value and the second unit value are stored in the storage queue is cleared, so that after the first unit value or the second unit value is cancelled, a new first unit value or the second unit value is recorded again next time, and it is re-recognized as the first time that the discontinuous first unit value and the second unit value are stored in the storage queue.

[0102] S154: If the storage queue stores discontinuous first and second unit values ​​for the first time, traverse the unit values ​​within the interval and store the unit values ​​between the first and second unit values ​​in the storage queue.

[0103] After all the above three determinations are successful, the unit values ​​within the interval can be traversed, and the unit values ​​between the first unit value and the second unit value can be stored in the storage queue to subsequently generate the first interval.

[0104] S155 : Generate a first interval and display a first interval to interval selection box 11 according to the first unit value and the second unit value and the unit value between the first unit value and the second unit value stored in the storage queue.

[0105] Furthermore, the storage queue can store the first unit value and the second unit value and the unit value between the first unit value and the second unit value in the form of a string. Therefore, the unit value needs to be converted into a string and stored in the storage queue. The specific code is as follows: Figure 8 shown.

[0106] For details, see Figure 8 As shown, the isYearsContinuous method can be used to determine whether the currently selected year queue is continuous. When generating the filling logic for the first interval, the generateYearRang method can be used to fill it, that is, automatically select the years between the start year and the end year selected by the user. This method first sorts the start year and the end year selected by the current user in positive order to prevent the problem of disordered order after filling. Then take out the start year and the end year and convert them into numbers to facilitate the loop logic of the numbers. Create an empty queue to process the years assigned to the current storage queue in the future, loop the year interval selected by the current user, fill it into the empty queue, and convert the numbers into strings at the same time, because the year field in the storage queue stores strings. After completion, the year field stored in the current storage queue is reassigned through this.formData.years = generateYearRange (this.formData.years), and the middle interval years are all highlighted after the user selects the start year-end year.

[0107] In addition, in the embodiments of the present invention, see Figure 3 and Figure 5As shown, it also includes recording the first unit value corresponding to the first click operation 31, displaying the first unit value in the first display mode 21, and displaying the unit value less than the first unit value in the second display mode 22; after recording the second unit value, displaying the second unit value in the first display mode 21, and displaying the unit value greater than the second unit value in the second display mode 22; after generating the first interval, displaying the unit values ​​in the first interval in the third display mode 23. The first display mode 21 can be specifically to highlight the values ​​in the first interval, used to highlight the selected unit value, the second display mode 22 can be specifically to dim the unit values ​​corresponding to the unit values ​​less than the first unit value and the unit values ​​greater than the second unit value, and the third display mode 23 can be used as a default display mode to indicate the selectable unit values.

[0108] Understandably, see Fig. 9 As shown, after the user interface 1 displays the interval selection interface 12, it also includes: in response to a fourth click operation corresponding to the interval range switching button 1211 in the first selection area 121, switching the interval range displayed in the first selection area 121, and at the same time, switching the unit value corresponding to the interval range in the second selection area 122. Fig. 9 As shown, the interval range is 10 years. After clicking the switch button, you can go forward 10 years, from 2030-2039 to 2020-2029. At the same time, the unit value in the second selection area 122 also changes with the change of the interval range.

[0109] It can be seen that in this embodiment, the selection of a numerical interval is implemented through a single first component in the Element-UI component library of Vue2. In addition, when responding to the third click operation, if the unit value corresponding to the third click operation is not the first unit value or the second unit value, the third click operation is not responded to, and the clickable unit values ​​other than the first unit value and the second unit value are disabled to avoid errors in the first component. At the same time, when the first unit value or the second unit value is clicked by the third click operation or the first unit value and the second unit value are continuous, the user can reselect a new first unit value or second unit value through the third click operation to quickly reselect the starting unit value or the ending unit value of the first interval; in addition, the clickable unit values, the selected unit values, and the disabled unit values ​​can be displayed in three display modes to improve the user experience.

[0110] Based on the same inventive concept, the present application embodiment also provides a section selection device. Fig.10 As shown, the first component in the Element-UI component library applied to Vue2 includes:

[0111] The interval selection interface display module 701 is used to display the interval selection interface 12 on the user interface 1 in response to a click operation on the interval selection box 11 in the user interface 1; wherein the interval selection box 11 and the interval selection interface 12 are made based on the first component, and the interval selection interface 12 includes a first selection area 121 and a second selection area 122, the first selection area 121 is used to display the interval range, and the second selection area 122 is used to display the unit value corresponding to the interval range;

[0112] A first value recording module 702, configured to record a first unit value corresponding to the first click operation 31 in the second selection area 122;

[0113] A first value determination module 703 is used to determine, in response to a second click operation 32 in the second selection area 122, whether a second unit value corresponding to the second click operation 32 is greater than the first unit value;

[0114] A second value recording module 704, configured to record the second unit value if the second unit value is greater than the first unit value;

[0115] The interval display module 705 is used to generate a first interval based on the first unit value and the second unit value and display the first interval to the interval selection box 11.

[0116] It may also include: a second value judgment module, a disabling module and a first canceling module.

[0117] A second value determination module, configured to, in response to a third click operation on the second selection area 122, determine whether the unit value corresponding to the third click operation is the first unit value or the second unit value;

[0118] a disabling module, configured to not respond to the third click operation if the unit value corresponding to the third click operation is not the first unit value or the second unit value;

[0119] The first canceling module is used to cancel the recording of the first unit value or the second unit value corresponding to the third click operation if the unit value corresponding to the third click operation is the first unit value or the second unit value.

[0120] It may also include: a third value judgment module and a second cancellation module.

[0121] A third value determination module, configured to determine whether the first unit value and the second unit value are continuous in response to a third click operation on the second selection area 122;

[0122] The second cancellation module is used to determine the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation from the first unit value and the second unit value if the first unit value and the second unit value are continuous; and cancel the record of the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation.

[0123] The first value recording module 702 may be specifically configured to record a first unit value into a storage queue.

[0124] The second value recording module 704 may be specifically configured to record the second unit value into a storage queue.

[0125] The interval display module 705 may specifically include: a first judgment unit, a continuous judgment unit, a first judgment unit, a storage queue unit and an interval display unit.

[0126] A first determination unit, configured to determine whether the storage queue includes a first unit value and a second unit value;

[0127] a continuity determination unit, configured to determine whether the first unit value and the second unit value in the storage queue are continuous if the storage queue includes the first unit value and the second unit value;

[0128] a first determination unit, for determining whether the first unit value and the second unit value are stored discontinuously in the storage queue for the first time if the first unit value and the second unit value are discontinuous;

[0129] A storage queue unit, for traversing the unit values ​​within the interval range and storing the unit values ​​between the first unit value and the second unit value into the storage queue if the storage queue stores discontinuous first unit value and second unit value for the first time;

[0130] The interval display unit is used to generate a first interval and display the first interval to interval selection box 11 according to the first unit value and the second unit value and the unit value between the first unit value and the second unit value stored in the storage queue.

[0131] It also includes recording the first unit value corresponding to the first click operation 31, displaying the first unit value in the first display mode 21, and displaying the unit value less than the first unit value in the second display mode 22; after recording the second unit value, displaying the second unit value in the first display mode 21, and displaying the unit value greater than the second unit value in the second display mode 22; after generating the first interval, displaying the unit values ​​within the first interval in the third display mode 23.

[0132] It may also include an interval range switching module for switching the interval range displayed in the first selection area 121 in response to a fourth click operation corresponding to the interval range switching button 1211 in the first selection area 121, and at the same time, switching the unit value corresponding to the interval range in the second selection area 122.

[0133] In some possible implementations, the interval selection device according to the present application may include at least a processor and a memory. The memory stores program code, and when the program code is executed by the processor, the processor executes the steps of the interval selection method according to various exemplary implementations of the present application described in this specification. For example, the processor may execute the following steps: Figure 2 Follow the steps shown in .

[0134] Based on the same inventive concept, an electronic device is also provided in the embodiment of the present application. The electronic device can implement the functions of the aforementioned interval selection method and device. Fig.11 , electronic equipment includes:

[0135] At least one processor 801, and a memory 802 connected to the at least one processor 801. The specific connection medium between the processor 801 and the memory 802 is not limited in the embodiment of the present application. Figure 8 In the example, the processor 801 and the memory 802 are connected via a bus 800. Figure 8 The connection between other components is shown by bold lines, and is not intended to be limiting. The bus 800 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 8 Only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus. Alternatively, the processor 801 can also be called a controller, and there is no limitation on the name.

[0136] In the embodiment of the present application, the memory 802 stores instructions that can be executed by at least one processor 801. The at least one processor 801 can execute the interval selection method discussed above by executing the instructions stored in the memory 802. The processor 801 can implement Figure 7 The functions of each module in the device shown.

[0137] Among them, the processor 801 is the control center of the device, and can use various interfaces and lines to connect the various parts of the entire control device. By running or executing instructions stored in the memory 802 and calling the data stored in the memory 802, the various functions of the device and process data, the device can be monitored as a whole.

[0138] In one possible design, the processor 801 may include one or more processing units, and the processor 801 may integrate an application processor and a modem processor, wherein the application processor mainly processes an operating system, a user interface 1, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the modem processor may not be integrated into the processor 801. In some embodiments, the processor 801 and the memory 802 may be implemented on the same chip, and in some embodiments, they may also be implemented separately on separate chips.

[0139] Processor 801 can be a general-purpose processor, such as a central processing unit (CPU), a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, and can implement or execute the various methods, steps and logic block diagrams disclosed in the embodiments of the present application. A general-purpose processor can be a microprocessor or any conventional processor, etc. The steps of the interval selection method disclosed in the embodiments of the present application can be directly embodied as a hardware processor to be executed, or a combination of hardware and software modules in the processor can be executed.

[0140] The memory 802 is a non-volatile computer-readable storage medium that can be used to store non-volatile software programs, non-volatile computer executable programs and modules. The memory 802 may include at least one type of storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory, a random access memory (Random Access Memory, RAM), a static random access memory (Static Random Access Memory, SRAM), a programmable read-only memory (Programmable Read Only Memory, PROM), a read-only memory (Read Only Memory, ROM), an electrically erasable programmable read-only memory (Electrically Erasable Programmable Read-Only Memory, EEPROM), a magnetic memory, a disk, an optical disk, etc. The memory 802 is any other medium that can be used to carry or store a desired program code in the form of an instruction or data structure and can be accessed by a computer, but is not limited thereto. The memory 802 in the embodiment of the present application can also be a circuit or any other device that can realize a storage function, for storing program instructions and / or data.

[0141] By programming the processor 801, the code corresponding to the interval selection method described in the above embodiment can be fixed into the chip, so that the chip can execute the code when running. Figure 2The steps of the interval selection method of the embodiment shown are as follows: How to design and program the processor 801 is a technique well known to those skilled in the art and will not be described in detail here.

[0142] Based on the same inventive concept, an embodiment of the present application further provides a storage medium, which stores computer instructions. When the computer instructions are executed on a computer, the computer executes the interval selection method discussed above.

[0143] In some possible implementations, various aspects of the interval selection method provided in the present application may also be implemented in the form of a program product, which includes a program code. When the program product is run on a device, the program code is used to enable the control device to execute the steps of the interval selection method according to various exemplary implementations of the present application described above in this specification.

[0144] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0145] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0146] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0147] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0148] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A method for selecting an interval, characterized in that: The first component in the Element-UI component library for Vue2, including: In response to a click operation on an interval selection box in a user interface, an interval selection interface is displayed on the user interface; wherein the interval selection box and the interval selection interface are made based on the first component, and the interval selection interface includes a first selection area and a second selection area, the first selection area is used to display an interval range, and the second selection area is used to display a unit value corresponding to the interval range; In response to a first click operation on the second selection area, recording a first unit value corresponding to the first click operation; In response to a second click operation on the second selection area, determining whether a second unit value corresponding to the second click operation is greater than the first unit value; If the second unit value is greater than the first unit value, recording the second unit value; A first interval is generated based on the first unit value and the second unit value, and the first interval is displayed in the interval selection box, wherein the first interval includes the first unit value and the second unit value.

2. The interval selection method according to claim 1, characterized in that: After generating the first interval, the method further includes: In response to a third click operation on the second selection area, determining whether the unit value corresponding to the third click operation is the first unit value or the second unit value; If the unit value corresponding to the third click operation is not the first unit value or the second unit value, the third click operation is not responded to; If the unit value corresponding to the third click operation is the first unit value or the second unit value, the first unit value or the second unit value corresponding to the third click operation is cancelled.

3. The interval selection method according to claim 1, characterized in that: After generating the first interval, the method further includes: In response to a third click operation on the second selection area, determining whether the first unit value and the second unit value are continuous; If the first unit value and the second unit value are continuous, determining the first unit value or the second unit value that is closest to the third unit value corresponding to the third click operation from among the first unit value and the second unit value; and The first unit value or the second unit value that is most adjacent to the third unit value corresponding to the third click operation is cancelled.

4. The interval selection method according to claim 1, characterized in that: Recording the first unit value and the second unit value to a storage queue; The process of generating a first interval based on the first unit value and the second unit value and displaying the first interval to the interval selection box includes: Determining whether the storage queue includes the first unit value and the second unit value; If the storage queue includes the first unit value and the second unit value, determining whether the first unit value and the second unit value in the storage queue are continuous; If the first unit value and the second unit value are discontinuous, determining whether the storage queue stores the discontinuous first unit value and the second unit value for the first time; If the storage queue stores the first unit value and the second unit value which are not continuous for the first time, traverse the unit values ​​within the interval and store the unit values ​​between the first unit value and the second unit value into the storage queue; The first interval is generated according to the first unit value and the second unit value and the unit value between the first unit value and the second unit value stored in the storage queue, and the first interval to the interval selection box are displayed.

5. The interval selection method according to claim 1, characterized in that: The method further includes recording a first unit value corresponding to the first click operation, displaying the first unit value in a first display mode, and displaying a unit value smaller than the first unit value in a second display mode; After recording the second unit value, displaying the second unit value in the first display mode, and displaying a unit value greater than the second unit value in the second display mode; After the first interval is generated, the unit values ​​within the first interval are displayed in a third display manner.

6. The interval selection method according to claim 1, characterized in that: After the user interface displays the interval selection interface, the method further includes: In response to a fourth click operation corresponding to the interval range switching button in the first selection area, the interval range displayed in the first selection area is switched, and at the same time, the unit value corresponding to the interval range in the second selection area is switched.

7. A section selection device, characterized in that: The first component in the Element-UI component library for Vue2, including: An interval selection interface display module, configured to display an interval selection interface on the user interface in response to a click operation on an interval selection box in the user interface; wherein the interval selection box and the interval selection interface are made based on the first component, and the interval selection interface includes a first selection area and a second selection area, the first selection area is used to display an interval range, and the second selection area is used to display a unit value corresponding to the interval range; A first value recording module, configured to, in response to a first click operation on the second selection area, record a first unit value corresponding to the first click operation; A first value determination module, configured to, in response to a second click operation on the second selection area, determine whether a second unit value corresponding to the second click operation is greater than the first unit value; A second value recording module, configured to record the second unit value if the second unit value is greater than the first unit value; The interval display module is used to generate a first interval based on the first unit value and the second unit value and display the first interval to the interval selection box.

8. The interval selection device according to claim 7, characterized in that: Also includes: a second value determination module, configured to, in response to a third click operation on the second selection area, determine whether the unit value corresponding to the third click operation is the first unit value or the second unit value; a disabling module, configured to not respond to the third click operation if the unit value corresponding to the third click operation is not the first unit value or the second unit value; The first canceling module is used to cancel the recording of the first unit value or the second unit value corresponding to the third click operation if the unit value corresponding to the third click operation is the first unit value or the second unit value.

9. An electronic device, characterized in that: The device comprises a processor and a memory, wherein the memory stores program codes, and when the program codes are executed by the processor, the processor executes any one of the methods in claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The storage medium comprises a program code, and when the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute any one of the methods of claims 1 to 6.

Images