Nothing Special   »   [go: up one dir, main page]

WO2023071452A1 - 一种组件的控制方法、装置、电子设备及存储介质 - Google Patents

一种组件的控制方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
WO2023071452A1
WO2023071452A1 PCT/CN2022/113547 CN2022113547W WO2023071452A1 WO 2023071452 A1 WO2023071452 A1 WO 2023071452A1 CN 2022113547 W CN2022113547 W CN 2022113547W WO 2023071452 A1 WO2023071452 A1 WO 2023071452A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
area
copy
drag input
target
Prior art date
Application number
PCT/CN2022/113547
Other languages
English (en)
French (fr)
Inventor
张泽
Original Assignee
北京字跳网络技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京字跳网络技术有限公司 filed Critical 北京字跳网络技术有限公司
Priority to US18/569,983 priority Critical patent/US20240289004A1/en
Publication of WO2023071452A1 publication Critical patent/WO2023071452A1/zh

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1407General aspects irrespective of display type, e.g. determination of decimal point position, display with fixed or driving decimal point, suppression of non-significant zeros
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842Selection of displayed objects or displayed text elements
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486Drag-and-drop
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14Digital output to display device ; Cooperation and interconnection of the display device with other functional units

Definitions

  • the present application relates to the technical field of software development, and in particular to a component control method, device, electronic equipment and storage medium.
  • Rich and reasonable page design (such as marketing page, search page, live broadcast page, etc.) can help attract users' attention and encourage users to participate in online activities such as online shopping, online search, and online live broadcast.
  • the page design process requires developers to add required components to the canvas area in the page editing interface to generate the required page layout.
  • existing component addition schemes cannot meet user needs and affect user experience.
  • the present application provides a component control method, device, electronic equipment and storage medium.
  • a component control method includes: displaying an editing interface, the editing interface includes a component library area and a canvas area; the component library area includes a plurality of Component ID, each component ID is used to indicate a component, and the canvas area is used to display the edited component; in response to the drag input of the selected target component ID in the component library area, the copy of the control component follows the drag input Move; wherein, the target component identifier is used to indicate the target component, and the display content of the copy of the component is the same as the display content of the target component.
  • the display size of the component copy is the same as the display size of the target component.
  • the method further includes: displaying the target component in the first area when the end position of the drag input is located in the first area of the canvas area ; If the end position of the drag input is located in the second area of the component library area, move the target component identifier to the second area.
  • the method further includes: before the end of the drag input, when the copy of the component enters the first area, displaying prompt information; wherein, the prompt information It is used to indicate that if the drag input ends at the current position, the target component will be displayed at the current position.
  • the method further includes: undisplaying the component copy.
  • the method before controlling the component copy of the target component to move following the drag input, the method further includes: displaying a loading identifier, where the loading identifier is used to indicate that the component copy is generated according to the target component identifier.
  • the target component is a container component
  • the container component is a container component other than the sliding container component
  • the mode of adding components in the container component is a single-line adding mode
  • the longitudinal size of the container component is adaptively adjusted along with the longitudinal size of each component in the container component.
  • a component control device which includes: a display module and a control module; the display module is used to display an editing interface, and the editing interface includes a component library area and a canvas area; the The component library area includes a plurality of component identifiers for canvas editing, each component identifier is used to indicate a component, and the canvas area is used to display the edited component; the control module is used for responding to the The drag input of the selected target component ID controls the component copy to move along with the drag input; wherein, the target component ID is used to indicate the target component, and the display content of the component copy is the same as that of the target component.
  • the display size of the component copy is the same as the display size of the target component.
  • the device further includes: a moving module; the display module is further configured to locate the end position of the drag input in the first area of the canvas area after the copy of the control component of the control module moves following the drag input.
  • the target component is displayed in the first area; the moving module is configured to locate the end position of the drag input in the second area of the component library area after the control module controls the copy of the component to move following the drag input In the case of , move the target component ID to the second area.
  • the display module is further configured to display prompt information when the component copy enters the first area after the control module controls the component copy to move following the drag input and before the drag input ends; wherein , the prompt information is used to indicate that if the drag input ends at the current position, the target component will be displayed at the current position.
  • the display module is further configured to display the target component in the first area after the target component is displayed in the first area of the canvas area when the end position of the drag input is located in the first area of the canvas area, or, after the target component After the logo moves to the second area, the copy of the component is canceled.
  • the display module is further configured to display a loading identifier before the control module controls the component copy of the target component to move following the drag input, and the loading identifier is used to indicate that the component copy is generated according to the target component identifier.
  • the target component is a container component
  • the container component is a container component other than the sliding container component
  • the mode of adding components in the container component is a single-line adding mode
  • the longitudinal size of the container component is adaptively adjusted along with the longitudinal size of each component in the container component.
  • an electronic device includes a processor, a memory, and a computer program stored on the memory and operable on the processor.
  • the computer program is executed by the processor, A step of implementing control of the component as described in the first aspect.
  • the fourth aspect of the embodiments of the present application provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the component control method as described in the first aspect is implemented. step.
  • a fifth aspect of the embodiments of the present application provides a computer program product, wherein the computer program product includes a computer program, and when the computer program product runs on a processor, the processor executes the computer program to implement the In one aspect the steps of a method for controlling an assembly.
  • the fifth aspect of the embodiments of the present application provides a chip, the chip includes a processor and a communication interface, the communication interface is coupled to the processor, and the processor is used to run program instructions to implement the components described in the first aspect control method.
  • FIG. 1 is one of the interface schematic diagrams of the control method of the components provided by the embodiment of the present application;
  • FIG. 2 is one of the schematic flowcharts of the control method of the components provided in the embodiment of the present application;
  • Fig. 3 is the second schematic interface diagram of the component control method provided by the embodiment of the present application.
  • Fig. 4 is the second schematic flow diagram of the control method of the components provided by the embodiment of the present application.
  • FIG. 5 is the third schematic flow diagram of the component control method provided by the embodiment of the present application.
  • FIG. 6 is the fourth schematic flow diagram of the control method of the components provided by the embodiment of the present application.
  • Fig. 7 is the third schematic interface diagram of the component control method provided by the embodiment of the present application.
  • FIG. 8 is a structural block diagram of a control device for a component provided in an embodiment of the present application.
  • FIG. 9 is a structural block diagram of an electronic device provided by an embodiment of the present application.
  • the component control method provided by the embodiment of this application can be applied to various page editing scenarios, such as editing marketing pages, search pages, live broadcast pages, application program pages (such as chat application program pages, shopping application program pages) and other pages
  • the editing interface includes the component library area and the canvas area, in response to the drag input of the selected target component identifier in the component library area, the copy of the component can be controlled to follow the drag input;
  • the target component identifier is used to indicate the target component
  • the display content of the component copy is the same as the display content of the target component.
  • the copy of the component that controls the same display content as the component moves along with the dragging input that is, the user can intuitively see the operating component identification indicator during the dragging process
  • the actual rendering effect, component composition, structure, etc. of the component so that it is not necessary to determine the actual rendering effect, style, composition, structure, etc. of the component indicated by the component ID after adding it to the canvas area.
  • the display mode of the component can assist the user's operation, improve the operation efficiency, and improve the user experience.
  • FIG. 1 is a schematic interface diagram of a component control method shown in the embodiment of the present application. As shown in FIG. 1 , it is a page editing interface 100 , which at least includes: a component library area 110 and a canvas area 120 . Among them, the component library area 110 includes a plurality of component identifications for canvas editing, and the multiple component identifications can be divided into but not limited to basic class, container class, tab class, task class, audio and video class according to the type of the indicated component wait.
  • the electronic device in the embodiment of the present application may be a mobile electronic device, or may be a non-mobile electronic device.
  • Mobile electronic devices can be mobile phones, tablet computers, notebook computers, PDAs, automotive electronic devices, wearable devices, ultra-mobile personal computers (UMPC), netbooks, or personal digital assistants (PDAs). etc.
  • the non-mobile electronic device may be a personal computer (personal computer, PC), a television (television, TV), a teller machine or a self-service machine, etc.; the embodiments of the present application are not specifically limited.
  • the execution subject of the component control method provided in the embodiment of the present application may be the above-mentioned electronic device (including mobile electronic device and non-mobile electronic device), or it may be a functional module and/or a functional module in the electronic device that can implement the component control method or a functional entity, which can be specifically determined according to actual usage requirements, and is not limited in this embodiment of the present application.
  • the embodiment of the present application provides a component control method.
  • the following takes an electronic device as an example to illustrate the component control method provided by the embodiment of the present application.
  • the method may include steps 201 to 202 as described below.
  • an editing interface may be displayed for the electronic device.
  • the editing interface may be a page editor interface.
  • the editing interface includes a component library area and a canvas area;
  • the component library area includes multiple component identifiers for canvas editing, each component identifier is used to indicate a component, and the canvas area is used to display edited components.
  • the above step 202 may be that in response to a drag input identified by the selected target component in the component library area, the electronic device controls the copy of the component to move following the drag input based on a movement parameter of the drag input.
  • the target component identifier is used to indicate the target component, and the display content of the component copy is the same as the display content of the target component.
  • the plurality of component identifiers displayed in the component library area can be understood as a catalog of multiple components in the component library, and whichever component identifier the user selects corresponds to the component indicated by which component identifier is selected.
  • the display content of the component copy can include the style, composition, structure, actual rendering effect, etc. of the component copy, and the display content of the component copy is the same as that of the target component, so the user can intuitively know the component style, Composition, structure, actual rendering effect, etc., so as to assist users in choosing the position of components.
  • the component copy may or may not have the function of the component, which is not limited in the embodiment of the present application.
  • the drag input refers to an input in which a target object is selected, and the target object is dragged to a target area (position) for release, and the target object is displayed in the target area (position) after release.
  • the movement parameters of the dragging input that is, the real-time moving position (coordinates) of the dragging input during the implementation process of the dragging input.
  • the component copy moves with the drag input, that is, the component copy moves from the initial position of the drag input to the end position of the drag input, where the initial position is, for example, the component library area
  • the location of the target component identifier corresponds to the drag start location, and the end location Any target display location in the canvas area corresponds to the drag end location. That is to say, during the drag input process, the real-time position of the drag input is the real-time position corresponding to the component copy.
  • the component copy is adsorbed on the cursor and moves together with the cursor. If the user performs a drag input by touching the screen with a finger, and the component copy moves along with the drag input, it can be understood that the component copy is attached to the finger and moves with the finger.
  • the cursor is also called a mouse pointer, and is used to identify a mouse position on a graphical interface.
  • the cursor can have different shapes, such as arrow type, small hand type, etc.
  • the editing interface includes the component library area and the canvas area, in response to the drag input of the selected target component identifier in the component library area, the control component copy follows the dragging Input movement; wherein, the target component identifier is used to indicate the target component, and the display content of the copy of the component is the same as the display content of the target component.
  • the copy of the component that controls the same display content as the component moves along with the dragging input, that is, the user can intuitively see the operating component identification indicator during the dragging process
  • the actual rendering effect, composition, structure, etc. of the component of the component so that it is not necessary to determine the actual rendering effect, composition, structure, etc.
  • the display effect can assist the user's operation and improve the operation efficiency.
  • the displayed size of the copy of the component is the same as the displayed size of the target component.
  • the display size of the component copy is the same as that of the target component, which can intuitively reflect the size of the component, thereby showing a more intuitive display effect of the component.
  • the component copy 122 corresponding to the picture component indicated by the picture mark moves along with the mouse 123 .
  • the component control method provided by the embodiment of the present application may further include the following step 203 or step 204 .
  • the electronic device displays the target component in the first area.
  • the electronic device displays the target component in the container in the canvas area. At this point, the target component is added to the container in the canvas area.
  • the target component displayed in the first area may be a component copy (in this case, the process can be saved, and there is no need for the subsequent process of generating a new target component and canceling the display of the component copy), or it may not be a component copy,
  • the embodiment of this application is not limited.
  • the display of the component copy may be canceled after step 203 . It should be noted that, in the following description of the embodiment of the present application, the target component displayed in the first area is not a copy of the component.
  • the electronic device moves the target component identification to the second area.
  • the electronic device displays the target component in the canvas area. At this time, the electronic device adjusts the position of the target component identification in the component library area.
  • the electronic device can control the copy of the component to follow the drag input, so that the component identification indication can be displayed more intuitively
  • the rendering effect of the component (component's style, shape, composition, structure, etc.).
  • the component copy after adding the target component in the canvas area or adjusting the position of the target component identifier in the component library area, the component copy (the component copy corresponding to the target component) can be deleted in time, or all can be deleted at a preset time
  • the component copy may also include component copies of other components), and the component copy may not be deleted, so as to be called again when the target component is added next time or the position of the target component identifier is adjusted in the component library area.
  • the preset time can be when the editing interface is canceled, or when the edited page in the canvas area is saved, or when the electronic device is turned off, or a fixed time (such as a fixed time in every day, every fixed times of the week, etc.).
  • the component control method provided by the embodiment of the present application may further include the following step 205 .
  • the electronic device undisplays the component copy.
  • the electronic device after the electronic device adds the target component to the canvas area, it cancels displaying the copy of the component.
  • Canceling the display of a component copy can be to delete the component copy, so that the storage space occupied by the component copy can be released in time; canceling the display of the component copy can also be to hide the component copy, so that the next time you need to add the target component or adjust the target component ID in the component
  • the copy of the component is reused without regeneration, which improves the loading speed.
  • the component control method provided in the embodiment of the present application may further include the following step 206 .
  • the electronic device displays prompt information when the component copy enters the first area.
  • the prompt information is used to indicate that if the drag input ends at the current position, the target component will be displayed at the current position.
  • the prompt information may include at least one of the following: text prompt information, pattern prompt information, and other forms of prompt information, which are not limited in this embodiment of the present application.
  • the above-mentioned pattern prompt information is used to indicate the position of the target component after the drag input is currently stopped.
  • the pattern prompt information can be the prompt information of a dotted line frame, or the prompt information of a bold solid line frame.
  • the pattern prompt information can be displayed with The display effects of flickering and specific colors are not limited in this embodiment of the present application.
  • the user by displaying prompt information, the user can be assisted in making a decision on the location of the target component, so that the target component can be placed at the position required by the user, thereby improving user operation efficiency and editing efficiency of the component.
  • a prompt message is displayed before the end of the drag input.
  • the electronic device displays a prompt message before the end of the drag input.
  • the preset threshold can be determined according to actual usage requirements, and is not limited in this embodiment of the present application. In this way, it is not necessary to display the prompt information all the time.
  • the user is prompted to stop the drag input, which can better assist the user in deciding the position of the target component in the first area. , Improve operational efficiency.
  • the component control method provided in the embodiment of the present application may further include step 207 as follows.
  • the electronic device displays the loading logo.
  • the loading identifier is used to indicate to generate a component copy according to the target component identifier.
  • the electronic device displays a loading logo indicated by a mark "111" to remind the user that a copy of the component is currently being loaded.
  • the loading identifier may be any preset identifier, which is not limited in this embodiment of the present application.
  • it may be a loading sign displaying a specific effect (eg, rotation effect).
  • the dynamic loading process can be shown to the user, prompting the user that the component is currently in the loading state and a copy of the component will be generated.
  • the target component is a container component
  • the container component is a container component other than the sliding container component
  • the mode of adding components in the container component is an individual adding mode
  • the single-line adding mode means that when adding components to a container component, each added component occupies an exclusive line in the container component.
  • the independent adding mode can facilitate the user to control the position of each component, thereby improving the operation efficiency.
  • the container component may be referred to simply as a container.
  • the container component is the parent container
  • a container component that is, the parent container under the parent container
  • the container component parent container
  • child container or other types of components (may be referred to as child components under a parent container).
  • the container component may include a carousel container, a navigation bar, a folding panel, a sliding container, and a pop-up window, etc., which are not limited in this embodiment of the present application.
  • the sliding mode of the sliding container can be configured, for example, the horizontal sliding mode (that is, the horizontal sliding container) and the vertical sliding mode (that is, the vertical sliding mode), the horizontal sliding container can add subcomponents horizontally, and the component adding mode of the horizontal sliding container
  • the vertical sliding container can add subcomponents vertically, and the component adding mode of the vertical sliding container is the single row adding mode.
  • the longitudinal dimension of the container assembly is adaptively adjusted with the longitudinal dimension of each component in the container assembly.
  • the longitudinal dimension of the container assembly is determined by the accumulation of the longitudinal dimensions of the individual components in the container assembly.
  • the longitudinal size of the container component changes with the cumulative change of the longitudinal size of each component, that is, the longitudinal size of the container component can be adjusted adaptively.
  • the mode in which the vertical size of the container component can be adaptively adjusted may be referred to as an adaptive height (ie, vertical size) mode.
  • the vertical size of the container component will change accordingly with the cumulative change of the vertical size of each component therein.
  • the longitudinal size of the container component can be adjusted adaptively, which can reduce the adjustment operation of the size of the container component by the user, thereby improving the operation efficiency.
  • the container component can also be in a fixed height mode.
  • the fixed height mode it can be adjusted by the user's operation on the container component (input the vertical size in the size adjustment window, or drag the border of the container component to adjust the size, etc.) The vertical size of the container component.
  • the components in the container component exceed the container component and will be clipped.
  • HTMLDivElement For the initial stage of dragging and adding components, dynamically load the component script (the loading logo is displayed at this time), and create an HTMLDivElement for mounting the component copy. After the component script is loaded (that is, the component copy is generated), in the HTMLDivElement The copy of the component is rendered (that is, the copy of the component is displayed). During the moving stage of dragging and adding components, HTMLDivElement and the rendered copy of the component will move with the mouse as the mirror image of the target component. At the end of dragging and adding components, destroy HTMLDivElement and component copy (i.e. remove HTMLDivElement and component copy). Since the mirror image itself is the actual rendering result of the component, it can represent the actual size and style of the component, which brings users a more intuitive feeling, and can assist users in making decisions on the placement position, improving the user's operational efficiency.
  • the mouse selects the target component ID in the component library, the mouse starts dragging (mousedown), creates a div element, sets it as a fixed (fixed) layout, and caches it in memory (that is, creates a div for mounting a copy of the component ); before the component script returns, the loading state is rendered in the div (the loading logo is displayed at this time) (that is, the component script is dynamically loaded asynchronously); after the component script returns, use React.createPortal to render the component copy into the div (ie Renders a copy of the component into a div).
  • the clientX (clientX event attribute) of the event is returned in real time to the horizontal coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered, where the client area refers to the current window .)
  • clientY (the clientY event attribute returns the vertical coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered) converted to the left (left coordinate) and top (upper coordinate) values of the div, so that the div is Moves with the mouse.
  • the mouse is custom dragged (mouseup), delete the copy of the component and destroy the div.
  • div is a label element in HyperText Markup Language (HTML) (an application under the standard universal markup language), which is used to provide block-level content in HTML documents. Elements for structure and background. Div is similar to a box and is used to mount a copy of the component. In the page editing interface, the div is displayed on the background of the copy of the component.
  • HTML HyperText Markup Language
  • Fig. 8 is a structural block diagram of a component control device shown in the embodiment of the present application.
  • the device includes: a display module 801 and a control module 802; the display module 801 is used to display an editing interface, and the editing The interface includes a component library area and a canvas area; the component library area includes multiple component identifications for canvas editing, each component identification is used to indicate a component, and the canvas area is used to display edited components; the control module 802 , used to respond to the drag input of the selected target component ID in the component library area, and control the movement of the component copy following the drag input; wherein, the target component ID is used to indicate the target component, and the display content of the component copy Same as the display content of the target component.
  • the displayed size of the copy of the component is the same as the displayed size of the target component.
  • the device further includes: a moving module; the display module 801 is further configured to locate the end position of the drag input in the canvas area after the control module 802 controls the copy of the component to move following the drag input In the case of the first area, the target component is displayed in the first area; the moving module is configured to locate the end position of the drag input in the component library after the control module 802 controls the copy of the component to move following the drag input In the case of the second area of the area, move the target component ID to the second area.
  • the display module 801 is further configured to display a prompt when the component copy enters the first area after the control module controls the copy of the component to move following the drag input and before the end of the drag input information; wherein, the prompt information is used to indicate that if the drag input ends at the current position, the target component will be displayed at the current position.
  • the display module 801 is further configured to, before the end of the drag input, when the copy of the component enters the first area, and when the moving speed of the drag input is less than a preset threshold In this case, a prompt message will be displayed.
  • the display module 801 is further configured to display the target component in the first area after the target component is displayed in the first area when the end position of the drag input is located in the first area of the canvas area, or, after the After the target component identifier is moved to the second area, the copy of the component is canceled.
  • the display module 801 is further configured to display a loading identifier before the control module controls the component copy of the target component to follow the drag input, and the loading identifier is used to indicate that the component copy is generated according to the target component identifier .
  • the target component is a container component
  • the container component is a container component other than the sliding container component
  • the mode of adding components in the container component is an individual adding mode
  • the longitudinal dimension of the container assembly is adaptively adjusted with the longitudinal dimension of each component in the container assembly.
  • control device of the component may be the electronic device in the above method embodiment, or may be a functional module and/or a functional entity in the electronic device in the above method embodiment that can realize the functions of the above device embodiment,
  • the embodiment of this application is not limited.
  • each module can implement the component control method provided by the above method embodiment, and can achieve the same technical effect. To avoid repetition, details are not repeated here.
  • the embodiment of the present application also provides an electronic device, which may include: a processor, a memory, and a computer program stored in the memory and operable on the processor.
  • a processor When the computer program is executed by the processor, the above method can be implemented.
  • Each process of the control method of the component provided by the example can achieve the same technical effect, so in order to avoid repetition, details are not repeated here.
  • FIG. 9 is a schematic diagram of a hardware structure of an electronic device implementing various embodiments of the present application.
  • the electronic device includes but is not limited to: a radio frequency (radio frequency, RF) circuit 901, a memory 902, Input unit 903, display unit 904, sensor 905, audio circuit 906, wireless communication (wireless fidelity, WiFi) module 907, processor 908, power supply 909 and other components.
  • the radio frequency circuit 901 includes a receiver 9011 and a transmitter 9012 .
  • FIG. 9 does not constitute a limitation on the electronic device, and may include more or less components than shown in the figure, or combine some components, or arrange different components.
  • the RF circuit 901 can be used for sending and receiving information or receiving and sending signals during a call. In particular, after receiving downlink information from the base station, it is processed by the processor 908; in addition, it sends designed uplink data to the base station.
  • the RF circuit 901 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (low noise amplifier, LNA), a duplexer, and the like.
  • the RF circuit 901 can also communicate with networks and other devices through wireless communication.
  • the above wireless communication can use any communication standard or protocol, including but not limited to global system of mobile communication (global system of mobile communication, GSM), general packet radio service (general packet radio service, GPRS), code division multiple access (code division multiple access) multiple access (CDMA), wideband code division multiple access (WCDMA), long term evolution (LTE), e-mail, short message service (short messaging service, SMS), etc.
  • GSM global system of mobile communication
  • GPRS general packet radio service
  • code division multiple access code division multiple access
  • WCDMA wideband code division multiple access
  • LTE long term evolution
  • e-mail short message service
  • SMS short message service
  • the memory 902 can be used to store software programs and modules, and the processor 908 executes various functional applications and data processing of the electronic device by running the software programs and modules stored in the memory 902 .
  • the memory 902 can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application program required by a function (such as a sound playback function, an image playback function, etc.); Data created by the use of electronic devices (such as audio data, phonebook, etc.), etc.
  • the memory 902 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage devices.
  • the input unit 903 can be used to receive input numbers or character information, and generate key signal input related to user settings and function control of the electronic device.
  • the input unit 903 may include a touch panel 9031 and other input devices 9032 .
  • the touch panel 9031 also referred to as a touch screen, can collect touch operations of the user on or near it (for example, the user uses any suitable object or accessory such as a finger or a stylus on the touch panel 9031 or near the touch panel 9031). operation), and drive the corresponding connection device according to the preset program.
  • the touch panel 9031 may include two parts, a touch detection device and a touch controller.
  • the touch detection device detects the user's touch orientation, and detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into contact coordinates, and sends it to the to the processor 908, and can receive and execute commands sent by the processor 908.
  • the touch panel 9031 can be realized by various methods such as resistive, capacitive, infrared, and surface acoustic wave.
  • the input unit 903 may also include other input devices 9032 .
  • other input devices 9032 may include, but are not limited to, one or more of physical keyboards, function keys (such as volume control keys, switch keys, etc.), trackballs, mice, joysticks, and the like.
  • the display unit 904 may be used to display information input by or provided to the user and various menus of the electronic device.
  • the display unit 904 may include a display panel 9041.
  • the display panel 9041 may be configured in the form of a liquid crystal display (liquid crystal display, LCD) or an organic light-emitting diode (OLED).
  • the touch panel 9031 can cover the display panel 9041. When the touch panel 9031 detects a touch operation on or near it, it sends it to the processor 908 to determine the touch event, and then the processor 908 according to the touch event A corresponding visual output is provided on the display panel 9041.
  • the touch panel 9031 and the display panel 9041 are used as two independent components to realize the input and input functions of the electronic device, in some embodiments, the touch panel 9031 and the display panel 9041 can be integrated. And realize the input and output function of electronic equipment.
  • the electronic device may also include at least one sensor 905, such as a light sensor, a motion sensor, and other sensors.
  • the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 9041 according to the brightness of the ambient light, and the proximity sensor may exit the display panel 9041 and the proximity sensor when the electronic device moves to the ear. / or backlighting.
  • the accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes), and can detect the magnitude and direction of gravity when it is stationary, and can be used to identify the posture of electronic equipment (such as horizontal and vertical screen switching, Related games, magnetometer attitude calibration), vibration recognition related functions (such as pedometer, tap), etc.; as for electronic equipment, other sensors such as gyroscope, geomagnetic sensor, barometer, hygrometer, thermometer, infrared sensor, etc. can also be configured , which will not be repeated here.
  • the electronic device may include an acceleration sensor, a depth sensor, or a distance sensor.
  • the audio circuit 906, the speaker 9061, and the microphone 9062 can provide an audio interface between the user and the electronic device.
  • the audio circuit 906 can transmit the electrical signal converted from the received audio data to the speaker 9061, and the speaker 9061 converts it into an audio signal for output; on the other hand, the microphone 9062 converts the collected audio signal into an electrical signal, and the audio circuit 906 After being received, it is converted into audio data, and then the audio data is processed by the output processor 908, and then sent to another electronic device through the RF circuit 901, or the audio data is output to the memory 902 for further processing.
  • WiFi is a short-distance wireless transmission technology. Electronic devices can help users send and receive emails, browse web pages, and access streaming media through the WiFi module 907, which provides users with wireless broadband Internet access.
  • FIG. 9 shows a WiFi module 907, it can be understood that it is not a necessary component of the electronic device, and can be completely omitted as required without changing the essence of the invention.
  • the processor 908 is the control center of the electronic device, and uses various interfaces and lines to connect various parts of the entire electronic device, by running or executing software programs and/or modules stored in the memory 902, and calling data stored in the memory 902 , to perform various functions of the electronic equipment and process data, so as to monitor the electronic equipment as a whole.
  • the processor 908 may include one or more processing units; in some embodiments, the processor 908 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user Interfaces and applications, etc., the modem processor mainly handles wireless communications. It can be understood that the foregoing modem processor may not be integrated into the processor 908 .
  • the electronic device also includes a power supply 909 (such as a battery) for supplying power to various components.
  • a power supply 909 (such as a battery) for supplying power to various components.
  • the power supply can be logically connected to the processor 908 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. and other functions.
  • the electronic device may also include a Bluetooth module, etc., which will not be repeated here.
  • the display unit 904 is configured to display an editing interface, the editing interface includes a component library area and a canvas area; the component library area includes a plurality of component identifications for canvas editing, and each component identification is used for Indicate a component, and the canvas area is used to display the edited component; the processor 908 is used to respond to the drag input of the selected target component identification in the component library area, and control the copy of the component to follow the drag input; wherein , the target component ID is used to indicate the target component, and the display content of the copy of the component is the same as the display content of the target component.
  • An embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored.
  • a computer program is stored.
  • the computer program is executed by a processor, each process of the component control method provided by the above-mentioned method embodiment is implemented, and can achieve The same technical effects are not repeated here to avoid repetition.
  • An embodiment of the present application also provides a computer program product, wherein the computer program product includes a computer program, and when the computer program product is run on a processor, the processor is made to execute the computer program to realize the components provided by the above method embodiments
  • the control method can achieve the same technical effect, in order to avoid repetition, no more details here.
  • a computer program includes a computer program or a computer instruction.
  • the embodiment of the present application further provides a chip, the chip includes a processor and a communication interface, the communication interface is coupled to the processor, the processor is used to run programs or instructions, and implement the control method embodiment of the above components Each process, and can achieve the same technical effect, in order to avoid repetition, will not repeat them here.
  • chips mentioned in the embodiments of the present application may also be called system-on-chip, system-on-chip, system-on-a-chip, or system-on-a-chip.
  • the disclosed system, device, server and method can be implemented in other ways.
  • the device embodiments described above are only illustrative.
  • the division of the units is only a logical function division. In actual implementation, there may be other division methods.
  • multiple units or components can be combined or May be integrated into another system, or some features may be ignored, or not implemented.
  • the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces, and the indirect coupling or communication connection of devices or units may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present application may be integrated into one processing unit, each unit may exist separately physically, or two or more units may be integrated into one unit.
  • the above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.
  • the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.
  • the essence of the technical solution of this application or the part that contributes to the related technology or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium.
  • a computer device which may be a personal computer, a server, or a network device, etc.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), magnetic disk or optical disc, etc., which can store program codes. .

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种组件的控制方法、装置、电子设备及存储介质,该方法包括:显示编辑界面,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,该画布区域用于显示编辑的组件;响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。

Description

一种组件的控制方法、装置、电子设备及存储介质
本申请要求于2021年10月28日提交的,申请名称为“一种组件的控制方法、装置、电子设备及存储介质”的、中国专利申请号为“202111265330.X”的优先权,该中国专利申请的全部内容通过引用结合在本申请中。
技术领域
本申请涉及软件开发技术领域,尤其涉及一种组件的控制方法、装置、电子设备及存储介质。
背景技术
丰富合理的页面(例如营销页面、搜索页面、直播页面等)设计可以有助于吸引用户的目光、促使用户加入网络购物、网络搜索、网络直播等网络活动中。
页面设计过程需要开发人员在页面编辑界面中将需要的组件添加至画布区域,以生成需要的页面布局。然而,现有的组件添加方案无法满足用户需求,影响用户体验。
发明内容
本申请提供了一种组件的控制方法、装置、电子设备及存储介质。
本申请实施例的第一方面,提供一种组件的控制方法,该方法包括:显示编辑界面,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,该画布区域用于显示编辑的组件;响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。
可选地,该组件副本的显示尺寸与该目标组件的显示尺寸相同。
可选地,在控制组件副本跟随该拖拽输入移动之后,该方法还包括:在该拖拽输入的结束位置位于该画布区域的第一区域的情况下,在第一区域内显示该目标组件;在该拖拽输入的结束位置位于该组件库区域的第二区域的情况下,将该目标组件标识移动至第二区域。
可选地,在控制组件副本跟随该拖拽输入移动之后,该方法还包括:在该拖拽输入结束之前,在该组件副本进入第一区域的情况下,显示提示信息;其中,该提示信息用于指示若在当前位置结束该拖拽输入,则该目标组件显示在该当前位置。
可选地,在拖拽输入的结束位置位于该画布区域第一区域的情况下,在第一区域内显示该目标组件之后,或者,在所述将所述目标组件标识移动至所述第二区域之后,该方法还包括:取消显示该组件副本。
可选地,在控制目标组件的组件副本跟随该拖拽输入移动之前,该方法还包括:显 示加载标识,该加载标识用于指示根据该目标组件标识生成该组件副本。
可选地,该目标组件为容器组件,在该容器组件为除滑动容器组件之外的容器组件的情况下,在该容器组件中添加组件的模式为独行添加模式。
可选地,该容器组件的纵向尺寸随着该容器组件中的各个组件的纵向尺寸自适应调整。
本申请实施例的第二方面,提供一种组件的控制装置,该装置包括:显示模块和控制模块;该显示模块,用于显示编辑界面,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,该画布区域用于显示编辑的组件;该控制模块,用于响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。
可选地,该组件副本的显示尺寸与该目标组件的显示尺寸相同。
可选地,该装置还包括:移动模块;该显示模块,还用于在控制模块控制组件副本跟随该拖拽输入移动之后,在该拖拽输入的结束位置位于该画布区域的第一区域的情况下,在第一区域内显示该目标组件;该移动模块,用于在控制模块控制组件副本跟随该拖拽输入移动之后,在该拖拽输入的结束位置位于该组件库区域的第二区域的情况下,将该目标组件标识移动至第二区域。
可选地,该显示模块,还用于在控制模块控制组件副本跟随该拖拽输入移动之后,在该拖拽输入结束之前,在该组件副本进入第一区域的情况下,显示提示信息;其中,该提示信息用于指示若在当前位置结束该拖拽输入,则该目标组件显示在该当前位置。
可选地,该显示模块,还用于在拖拽输入的结束位置位于该画布区域第一区域的情况下,在第一区域内显示该目标组件之后,或者,在所述将所述目标组件标识移动至所述第二区域之后,取消显示该组件副本。
可选地,该显示模块,还用于在控制模块控制目标组件的组件副本跟随该拖拽输入移动之前,显示加载标识,该加载标识用于指示根据该目标组件标识生成该组件副本。
可选地,该目标组件为容器组件,在该容器组件为除滑动容器组件之外的容器组件的情况下,在该容器组件中添加组件的模式为独行添加模式。
可选地,该容器组件的纵向尺寸随着该容器组件中的各个组件的纵向尺寸自适应调整。
本申请实施例的第三方面,提供一种电子设备,该电子设备包括处理器、存储器及存储在该存储器上并可在该处理器上运行的计算机程序,该计算机程序被该处理器执行时实现如第一方面所述的组件的控制的步骤。
本申请实施例的第四方面,提供一种计算机可读存储介质,该计算机可读存储介质上存储计算机程序,该计算机程序被处理器执行时实现如第一方面所述的组件的控制方法的步骤。
本申请实施例的第五方面,提供了一种计算机程序产品,其中,该计算机程序产品包括计算机程序,当该计算机程序产品在处理器上运行时,使得处理器执行该计算机程序,实现如第一方面所述的组件的控制方法的步骤。
本申请实施例的第五方面,提供了一种芯片,该芯片包括处理器和通信接口,该通信接口和该处理器耦合,该处理器用于运行程序指令,实现如第一方面所述的组件的控制方法。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或相关技术中的技术方案,下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的组件的控制方法的界面示意图之一;
图2为本申请实施例提供的组件的控制方法的流程示意图之一;
图3为本申请实施例提供的组件的控制方法的界面示意图之二;
图4为本申请实施例提供的组件的控制方法的流程示意图之二;
图5为本申请实施例提供的组件的控制方法的流程示意图之三;
图6为本申请实施例提供的组件的控制方法的流程示意图之四;
图7为本申请实施例提供的组件的控制方法的界面示意图之三;
图8为本申请实施例提供的一种组件的控制装置的结构框图;
图9为本申请实施例提供的一种电子设备的结构框图。
具体实施方式
为了能够更清楚地理解本申请的上述目的、特征和优点,下面将对本申请的方案进行进一步描述。需要说明的是,在不冲突的情况下,本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本申请,但本申请还可以采用其他不同于在此描述的方式来实施;显然,说明书中的实施例只是本申请的一部分实施例,而不是全部的实施例。
本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象, 而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施,且“第一”、“第二”等所区分的对象通常为一类,并不限定对象的个数,例如第一对象可以是一个,也可以是多个。此外,说明书以及权利要求中“和/或”表示所连接对象的至少其中之一,字符“/”,一般表示前后关联对象是一种“或”的关系。
本申请实施例提供的组件的控制方法,可以应用于各种页面编辑场景中,例如编辑营销页面、搜索页面、直播页面、应用程序页面(如聊天应用程序页面、购物应用程序页面)等页面的场景中,可以通过显示编辑界面,该编辑界面中包括组件库区域和画布区域,响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。该方案中,在通过拖拽输入拖拽组件的过程中,控制与组件显示内容相同的组件副本跟随该拖拽输入移动,即在拖拽过程中用户则可以直观地看到操作的组件标识指示的组件的实际渲染效果、组件的组成、结构等,从而无需在添加到画布区域后,才能确定组件标识指示的组件的实际渲染效果、组件的样式、组成、结构等,如此给用户更多地组件的显示方式,可以辅助用户的操作,提高操作效率,提高用户体验。
首先,图1为本申请实施例示出的一种组件的控制方法的界面示意图。如图1所示,为页面编辑界面100,该页面编辑界面100中至少包括:组件库区域110和画布区域120。其中,组件库区域110包括用于画布编辑的多个组件标识,该多个组件标识按照指示的组件的类型可以分为但不限于基础类、容器类、选项卡类、任务类、音视频类等。
本申请实施例中的电子设备可以为移动电子设备,也可以为非移动电子设备。移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer,UMPC)、上网本或者个人数字助理(personal digital assistant,PDA)等;非移动电子设备可以为个人计算机(personal computer,PC)、电视机(television,TV)、柜员机或者自助机等;本申请实施例不作具体限定。
本申请实施例提供的组件的控制方法的执行主体可以为上述的电子设备(包括移动电子设备和非移动电子设备),也可以为该电子设备中能够实现该组件的控制方法的功能模块和/或功能实体,具体的可以根据实际使用需求确定,本申请实施例不作限定。
下面结合附图,通过具体的实施例及其应用场景对本申请实施例提供的组件的控制方法进行详细地说明。
如图2所示,本申请实施例提供一种组件的控制方法,下面以执行主体为电子设备 为例,对本申请实施例提供的组件的控制方法进行示例性的说明。该方法可以包括下述的步骤201至步骤202。
201、显示编辑界面。
具体地,可以为电子设备显示编辑界面。在本申请实施例中,编辑界面可以为页面编辑器界面。
其中,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,该画布区域用于显示编辑的组件。
202、响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动。
具体地,上述步骤202可以为响应于对该组件库区域中已选中的目标组件标识的拖拽输入,电子设备基于该拖拽输入的移动参数,控制组件副本跟随该拖拽输入移动。
其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。
其中,组件库区域显示的该多个组件标识,可以理解为是组件库中的多个组件的目录,用户选择哪个组件标识,就对应选中哪个组件标识指示的组件。
其中,组件副本的显示内容可以包括组件副本的样式、组成、结构、实际渲染效果等,组件副本的显示内容与该目标组件的显示内容相同,则用户通过组件副本可以直观地知道组件的样式、组成、结构、实际渲染效果等,如此可以辅助用户对组件的位置的选择。
本申请实施例中,组件副本可以具有组件的功能,也可以不具有组件的功能,本申请实施例不做限定。
其中,拖拽输入是指选中目标对象,并将目标对象拖动到目标区域(位置)释放,并且释放之后目标对象显示在目标区域(位置)的输入。拖拽输入的移动参数,即在拖拽输入的实施过程中,拖拽输入的实时移动位置(坐标)。可以理解,基于该拖拽输入的移动参数,组件副本跟随该拖拽输入移动,即组件副本从拖拽输入的初始位置一直跟随移动至拖拽输入的结束位置,其中,初始位置比如组件库区域目标组件标识所在位置,对应拖拽开始位置,结束位置画布区域任一目标展示位置,对应拖拽结束位置。也就是说,在拖拽输入过程中,拖拽输入的实时位置即为组件副本对应的实时位置。
示例性地,如果用户通过鼠标实施拖拽输入,组件副本跟随该拖拽输入移动可以理解为组件副本吸附在光标上,跟随光标一起移动。如果用户通过手指触控屏幕方式实施拖拽输入,组件副本跟随该拖拽输入移动可以理解为组件副本吸附在手指上,跟随手指一起移动。
其中,光标又称为鼠标指针,用于在图形界面上标识出鼠标位置。光标可以有不同的形态,例如箭头型、小手型等。
本申请实施例中,可以通过显示编辑界面,该编辑界面中包括组件库区域和画布区域,响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。该方案中,在通过拖拽输入拖拽组件的过程中,控制与组件显示内容相同的组件副本跟随该拖拽输入移动,即在拖拽过程中用户则可以直观地看到操作的组件标识指示的组件的实际渲染效果、组件的组成、结构等,从而无需在添加到画布区域后,才能确定组件标识指示的组件的实际渲染效果、组件的组成、结构等,如此给用户更多地组件的显示效果,可以辅助用户的操作,提高操作效率。
在一些实施例中,该组件副本的显示尺寸与该目标组件的显示尺寸相同。
本申请实施例中,组件副本与目标组件的显示尺寸相同,可以直观体现组件大小,从而可以展示组件更直观的显示效果。
示例性地,如图3所示,用户选中图片标识拖拽至画布区域的容器121的过程中,图片标识指示的图片组件对应的组件副本122跟随鼠标123一起移动。
在一些实施例中,结合图2,如图4所示,在上述步骤202之后,本申请实施例提供的组件的控制方法还可以包括下述步骤203或步骤204。
203、在拖拽输入的结束位置位于画布区域的第一区域的情况下,在第一区域内显示目标组件。
具体地,在拖拽输入的结束位置位于画布区域的第一区域的情况下,电子设备在第一区域内显示目标组件。
可以理解,在用户将组件标识拖拽至画布区域的某容器中(上述第一区域)的情况下,电子设备在画布区域的该容器中显示目标组件。此时,将目标组件添加至画布区域的容器中。
在一些实施例中,显示在第一区域的该目标组件可以是组件副本(此种情况下可以节约流程,无需后续新生成目标组件、以及取消显示组件副本的过程),也可以不是组件副本,本申请实施例不做限定。在显示在第一区域的该目标组件不是组件副本的情况下,可以在步骤203之后取消显示该组件副本。需要说明的是,在本申请实施例的下述描述中,显示在第一区域的该目标组件不是组件副本。
204、在拖拽输入的结束位置位于组件库区域的第二区域的情况下,将目标组件标识移动至第二区域。
具体地,在拖拽输入的结束位置位于组件库区域的第二区域的情况下,电子设备将 目标组件标识移动至第二区域。
可以理解,在用户将组件标识拖拽至组件库区域的其他区域(上述第二区域)时的情况下,电子设备在画布区域中显示目标组件。此时,电子设备调整目标组件标识在组件库区域的位置。
本申请实施例中,在画布区域添加组件的过程中或在组件库区域调整组件标识位置的过程中,电子设备均可以控制组件副本跟随该拖拽输入移动,从而可以更直观地展示组件标识指示的组件的渲染效果(组件的样式、形状、组成、结构等)。
在一些实施例中,在画布区域中添加目标组件或在组件库区域中调整目标组件标识的位置之后,可以及时删除组件副本(目标组件对应的组件副本),也可以在预设时间统一删除所有组件副本(可能还包括其他组件的组件副本),还可以不删除该组件副本,以备在下次添加目标组件或调整目标组件标识在组件库区域的位置时再次调用该组件副本。其中,预设时间,可以是取消显示该编辑界面时,也可以是保存该画布区域中编辑的页面时,也可以是电子设备关机时,还可以是固定时间(例如每天中的固定时间、每周中的固定时间等)。
示例性地,结合图4,如图5所示,在上述步骤203或步骤204之后,本申请实施例提供的组件的控制方法还可以包括下述步骤205。
205、取消显示组件副本。
具体地,电子设备取消显示组件副本。
本申请实施例中,电子设备在将目标组件添加至该画布区域后,即取消显示该组件副本。取消显示组件副本可以为删除该组件副本,如此可以及时释放该组件副本占用的存储空间;取消显示组件副本也可以为隐藏该组件副本,如此可以在下次需要添加目标组件或调整目标组件标识在组件库区域的位置时,复用该组件副本,无需重新生成,提高加载速度。
在一些实施例中,结合图5,如图6所示,在上述步骤202之后,本申请实施例提供的组件的控制方法还可以包括下述步骤206。
206、在拖拽输入结束之前,在组件副本进入第一区域的情况下,显示提示信息。
具体地,在拖拽输入结束之前,在组件副本进入第一区域的情况下,电子设备显示提示信息。
其中,该提示信息用于指示若在当前位置结束该拖拽输入,则该目标组件显示在该当前位置。
在一些实施例中,该提示信息可以包括以下至少一种:文字提示信息,图案提示信息,还可以包括其他形式的提示信息,本申请实施例不做限定。
其中,上述图案提示信息用于指示当前停止拖拽输入后,该目标组件的位置,图案提示信息可以为虚线框提示信息,也可以是加粗实线框提示信息,同时图案提示信息可以显示有闪烁、特定颜色的显示效果,本申请实施例不做限定。
本申请实施例中,通过显示提示信息,可以辅助用户对目标组件的落点位置进行决策,使目标组件放置于用户需求位置,从而提高了用户操作效率,提高了对组件的编辑效率。
在本申请的一些实施方式中,在拖拽输入结束之前,在组件副本进入第一区域,且在拖拽输入的移动速度小于预设阈值的情况下,显示提示信息。
在一些实施例中,在该拖拽输入结束之前,在该组件副本进入第一区域且检测到拖拽输入的移动速度小于预设阈值的情况下,电子设备显示提示信息。预设阈值可以根据实际使用需求确定,本申请实施例不做限定。如此可以不用一直显示提示信息,当用户有意向(拖拽输入的移动速度变小可以表示有意向停止)停止拖拽输入时提示用户,可以更好地辅助用户决策目标组件在第一区域的位置,提高操作效率。
在一些实施例中,在上述步骤202之前,本申请实施例提供的组件的控制方法还可以包括下述步骤207。
207、显示加载标识。
具体地,电子设备显示加载标识。
其中,该加载标识用于指示根据目标组件标识生成组件副本。
示例性地,如图7所示,当用户选中图片组件标识时,电子设备显示标记“111”指示的加载标识,用以提示用户当前正在加载组件副本。
其中,加载标识可以为任意预设的标识,本申请实施例不做限定。例如可以为显示特定效果(如,转动效果)的加载标识。
本申请实施例中,通过显示加载标识,可以给用户展示动态加载过程,提示用户当前处于加载状态,即将生成组件副本。
在一些实施例中,该目标组件为容器组件,在该容器组件为除滑动容器组件之外的容器组件的情况下,在该容器组件中添加组件的模式为独行添加模式。
可以理解,独行添加模式,即在向一容器组件中添加组件时,添加的每个组件在该容器组件中独占一行。
本申请实施例中,独行添加模式可以便于用户控制每个组件的位置,从而可以提高操作效率。
需要说明的是,容器组件可以简称为容器。在页面编辑界面中,通常情况下在画布区域添加组件时,需要先添加容器类组件(该容器组件为父容器),再在容器组件(父 容器)中添加容器组件(即为父容器下的子容器)或其他类型的组件(可以称为父容器下的子组件)。
容器组件可以包括轮播容器、导航栏、折叠面板、滑动容器和弹窗等,本申请实施例不做限定。其中,可以配置滑动容器的滑动模式,例如,横向滑动模式(即为横向滑动容器)和纵向滑动模式(即为纵向滑动模式),横向滑动容器可以横向添加子组件,横向滑动容器的组件添加模式为独列添加模式,纵向滑动容器可以纵向添加子组件,纵向滑动容器的组件添加模式为独行添加模式。
在一些实施例中,该容器组件的纵向尺寸随着该容器组件中的各个组件的纵向尺寸自适应调整。
可以理解,该容器组件的纵向尺寸由该容器组件中的各个组件的纵向尺寸累加决定。该容器组件的纵向尺寸随各个组件的纵向尺寸累加变化而变化,即该容器组件的纵向尺寸可自适应调整。容器组件的纵向尺寸可自适应调整的模式可称为自适应高度(即纵向尺寸)模式。
可以理解,无论在容器组件中添加组件、删除组件、调整组件尺寸等,容器组件的纵向尺寸随其中的各个组件的纵向尺寸累加变化而相应变化。
本申请实施例中,容器组件的纵向尺寸可自适应调整,可以减少用户对容器组件的尺寸的调整操作,从而可以提高操作效率。
在一些实施例中,容器组件也可以为固定高度模式,固定高度模式下,可以通过用户对容器组件的操作(在尺寸调整窗中输入纵向尺寸、或者拖拽容器组件的边界调整尺寸等)调整容器组件的纵向尺寸。在固定高度模式下,容器组件中的组件超出容器组件外,会被裁剪。
示例性地,下面描述实现本申请提供的组件的控制方法的一些实现方式,但不限于该种实现方式。
在拖拽添加组件的开始阶段,动态加载组件脚本(此时显示加载标识),并创建用于挂载组件副本的HTMLDivElement,在组件脚本加载完毕(即生成组件副本)后,在该HTMLDivElement中对组件副本进行渲染(即显示组件副本),在拖拽添加组件的移动阶段,HTMLDivElement和其中被渲染的组件副本将作为目标组件的镜像跟随鼠标一起移动,在拖拽添加组件的结束阶段,销毁HTMLDivElement和组件副本(即删除HTMLDivElement和组件副本)。由于镜像本身就是组件的实际渲染结果,所以可以表示组件的实际大小和样式,带给用户的感受更加直观,并且可以辅助用户对落点位置进行决策,提高了用户的操作效率。
示例性地,在组件库中鼠标选中目标组件标识,鼠标开始拖拽(mousedown),创 建div元素,设置为固定(fixed)布局,并缓存在内存中(即创建用于挂载组建副本的div);在组件脚本返回之前,在div中先渲染加载态(此时显示加载标识)(即异步动态加载组件脚本);在组件脚本返回之后,使用React.createPortal将组件副本渲染至div中(即渲染组件副本至div中)。在鼠标拖拽(mousemove)过程中,实时将event的clientX(clientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标,其中,客户区指的是当前窗口。),clientY(clientY事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的垂直坐标)转换为div的left(左坐标)和top(上坐标)值,这样div就会跟随鼠标进行移动。在鼠标定制拖拽时(mouseup),删除组件副本,并销毁div。
需要说明的是,div是超文本标记语言(HyperText Markup Language,HTML)(标准通用标记语言下的一个应用)中的一个标签元素,用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。Div类似于一个盒子,用于挂载组件副本,在页面编辑界面中,div是以组件副本的背景显示的。
图8为本申请实施例示出的一种组件的控制装置的结构框图,如图8所示,该装置包括:显示模块801和控制模块802;该显示模块801,用于显示编辑界面,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,该画布区域用于显示编辑的组件;该控制模块802,用于响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。
在一些实施例中,该组件副本的显示尺寸与该目标组件的显示尺寸相同。
在一些实施例中,该装置还包括:移动模块;该显示模块801,还用于在控制模块802控制组件副本跟随该拖拽输入移动之后,在该拖拽输入的结束位置位于该画布区域的第一区域的情况下,在第一区域内显示该目标组件;该移动模块,用于在控制模块802控制组件副本跟随该拖拽输入移动之后,在该拖拽输入的结束位置位于该组件库区域的第二区域的情况下,将该目标组件标识移动至第二区域。
在一些实施例中,该显示模块801,还用于在控制模块控制组件副本跟随该拖拽输入移动之后,在该拖拽输入结束之前,在该组件副本进入第一区域的情况下,显示提示信息;其中,该提示信息用于指示若在当前位置结束该拖拽输入,则该目标组件显示在该当前位置。
在一些实施例中,该显示模块801,还用于在所述拖拽输入结束之前,在所述组件副本进入所述第一区域,且在所述拖拽输入的移动速度小于预设阈值的情况下,显示提 示信息。
在一些实施例中,该显示模块801,还用于在拖拽输入的结束位置位于该画布区域第一区域的情况下,在第一区域内显示该目标组件之后,或者,在所述将所述目标组件标识移动至所述第二区域之后,取消显示该组件副本。
在一些实施例中,该显示模块801,还用于在控制模块控制目标组件的组件副本跟随该拖拽输入移动之前,显示加载标识,该加载标识用于指示根据该目标组件标识生成该组件副本。
在一些实施例中,该目标组件为容器组件,在该容器组件为除滑动容器组件之外的容器组件的情况下,在该容器组件中添加组件的模式为独行添加模式。
在一些实施例中,该容器组件的纵向尺寸随着该容器组件中的各个组件的纵向尺寸自适应调整。
本申请实施例中,该组件的控制装置可以为上述方法实施例中的电子设备,也可以为上述方法实施例中的电子设备中能够实现上述装置实施例功能的功能模块和/或功能实体,本申请实施例不做限定。
本申请实施例中,各模块可以实现上述方法实施例提供的组件的控制方法,且能达到相同的技术效果,为避免重复,这里不再赘述。
本申请实施例还提供一种电子设备,该电子设备可以包括:处理器,存储器以及存储在存储器上并可在处理器上运行的计算机程序,该计算机程序被处理器执行时可以实现上述方法实施例提供的组件的控制方法的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
示例性地,图9为实现本申请各个实施例的一种电子设备的硬件结构示意图,如图9所示,该电子设备包括但不限于:射频(radio frequency,RF)电路901、存储器902、输入单元903、显示单元904、传感器905、音频电路906、无线通信(wireless fidelity,WiFi)模块907、处理器908、以及电源909等部件。其中,射频电路901包括接收器9011和发送器9012。本领域技术人员可以理解,图9中示出的电子设备结构并不构成对电子设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
RF电路901可用于收发信息或通话过程中,信号的接收和发送,特别地,将基站的下行信息接收后,给处理器908处理;另外,将设计上行的数据发送给基站。通常,RF电路901包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(low noise amplifier,LNA)、双工器等。此外,RF电路901还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议,包括但不限于全球 移动通讯系统(global system of mobile communication,GSM)、通用分组无线服务(general packet radio service,GPRS)、码分多址(code division multiple access,CDMA)、宽带码分多址(wideband code division multiple access,WCDMA)、长期演进(long term evolution,LTE)、电子邮件、短消息服务(short messaging service,SMS)等。
存储器902可用于存储软件程序以及模块,处理器908通过运行存储在存储器902的软件程序以及模块,从而执行电子设备的各种功能应用以及数据处理。存储器902可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等;存储数据区可存储根据电子设备的使用所创建的数据(比如音频数据、电话本等)等。此外,存储器902可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
输入单元903可用于接收输入的数字或字符信息,以及产生与电子设备的用户设置以及功能控制有关的键信号输入。具体地,输入单元903可包括触控面板9031以及其他输入设备9032。触控面板9031,也称为触摸屏,可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板9031上或在触控面板9031附近的操作),并根据预先设定的程式驱动相应的连接装置。在一些实施例中,触控面板9031可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器908,并能接收处理器908发来的命令并加以执行。此外,可以采用电阻式、电容式、红外线以及表面声波等多种实现触控面板9031。除了触控面板9031,输入单元903还可以包括其他输入设备9032。具体地,其他输入设备9032可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元904可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种菜单。显示单元904可包括显示面板9041,在一些实施例中,可以采用液晶显示器(liquid crystal display,LCD)、有机发光二极管(organic light-Emitting diode,OLED)等形式来配置显示面板9041。进一步的,触控面板9031可覆盖显示面板9041,当触控面板9031检测到在其上或附近的触摸操作后,传送给处理器908以确定触摸事件的,随后处理器908根据触摸事件的在显示面板9041上提供相应的视觉输出。虽然在图9中,触控面板9031与显示面板9041是作为两个独立的部件来实现电子设备的输入和输入功能,但是在某些实施例中,可以将触控面板9031与显示面板9041集成而实现电子设备的输入和输出功能。
电子设备还可包括至少一种传感器905,比如光传感器、运动传感器以及其他传感器。具体地,光传感器可包括环境光传感器及接近传感器,其中,环境光传感器可根据环境光线的明暗来调节显示面板9041的亮度,接近传感器可在电子设备移动到耳边时,退出显示面板9041和/或背光。作为运动传感器的一种,加速计传感器可检测各个方向上(一般为三轴)加速度的大小,静止时可检测出重力的大小及方向,可用于识别电子设备姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等;至于电子设备还可配置的陀螺仪、地磁传感器、气压计、湿度计、温度计、红外线传感器等其他传感器,在此不再赘述。本申请实施例中,该电子设备可以包括加速度传感器、深度传感器或者距离传感器等。
音频电路906、扬声器9061,传声器9062可提供用户与电子设备之间的音频接口。音频电路906可将接收到的音频数据转换后的电信号,传输到扬声器9061,由扬声器9061转换为声音信号输出;另一方面,传声器9062将收集的声音信号转换为电信号,由音频电路906接收后转换为音频数据,再将音频数据输出处理器908处理后,经RF电路901以发送给比如另一电子设备,或者将音频数据输出至存储器902以便进一步处理。
WiFi属于短距离无线传输技术,电子设备通过WiFi模块907可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图9示出了WiFi模块907,但是可以理解的是,其并不属于电子设备的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。
处理器908是电子设备的控制中心,利用各种接口和线路连接整个电子设备的各个部分,通过运行或执行存储在存储器902内的软件程序和/或模块,以及调用存储在存储器902内的数据,执行电子设备的各种功能和处理数据,从而对电子设备进行整体监控。在一些实施例中,处理器908可包括一个或多个处理单元;在一些实施例中,处理器908可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器908中。
电子设备还包括给各个部件供电的电源909(比如电池),在一些实施例中,电源可以通过电源管理系统与处理器908逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。尽管未示出,电子设备还可以包括蓝牙模块等,在此不再赘述。
本申请实施例中,显示单元904,用于显示编辑界面,该编辑界面中包括组件库区域和画布区域;该组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于 指示一个组件,该画布区域用于显示编辑的组件;处理器908,用于响应于对该组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随该拖拽输入移动;其中,该目标组件标识用于指示目标组件,该组件副本的显示内容与该目标组件的显示内容相同。
本申请实施例提供一种计算机可读存储介质,该计算机可读存储介质上存储计算机程序,该计算机程序被处理器执行时实现上述方法实施例提供的组件的控制方法的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
本申请实施例还提供一种计算机程序产品,其中,该计算机程序产品包括计算机程序,当该计算机程序产品在处理器上运行时,使得处理器执行该计算机程序,实现上述方法实施例提供的组件的控制方法的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
本申请实施例中,计算机程序包括计算机程序或计算机指令。
本申请实施例另提供了一种芯片,所述芯片包括处理器和通信接口,所述通信接口和所述处理器耦合,所述处理器用于运行程序或指令,实现上述组件的控制方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
应理解,本申请实施例提到的芯片还可以称为系统级芯片、系统芯片、芯片系统或片上系统芯片等。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统,装置,服务器和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上 或者说对相关技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,以上实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (13)

  1. 一种组件的控制方法,其中,所述方法包括:
    显示编辑界面,所述编辑界面中包括组件库区域和画布区域;所述组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,所述画布区域用于显示编辑的组件;
    响应于对所述组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随所述拖拽输入移动;
    其中,所述目标组件标识用于指示目标组件,所述组件副本的显示内容与所述目标组件的显示内容相同。
  2. 根据权利要求1所述的方法,其中,所述组件副本的显示尺寸与所述目标组件的显示尺寸相同。
  3. 根据权利要求1所述的方法,其中,所述控制组件副本跟随所述拖拽输入移动之后,所述方法还包括:
    在所述拖拽输入的结束位置位于所述画布区域的第一区域的情况下,在所述第一区域内显示所述目标组件;
    在所述拖拽输入的结束位置位于所述组件库区域的第二区域的情况下,将所述目标组件标识移动至所述第二区域。
  4. 根据权利要求3所述的方法,其中,所述控制组件副本跟随所述拖拽输入移动之后,所述方法还包括:
    在所述拖拽输入结束之前,在所述组件副本进入所述第一区域的情况下,显示提示信息;
    其中,所述提示信息用于指示若在当前位置结束所述拖拽输入,则所述目标组件显示在所述当前位置。
  5. 根据权利要求4所述的方法,其中,所述在所述拖拽输入结束之前,在所述组件副本进入所述第一区域的情况下,显示提示信息,包括:
    在所述拖拽输入结束之前,在所述组件副本进入所述第一区域,且在所述拖拽输入的移动速度小于预设阈值的情况下,显示提示信息。
  6. 根据权利要求3所述的方法,其中,所述在所述拖拽输入的结束位置位于所述画布区域第一区域的情况下,在所述第一区域内显示所述目标组件之后,或者,在所述将所述目标组件标识移动至所述第二区域之后,所述方法还包括:
    取消显示所述组件副本。
  7. 根据权利要求1至6中任一项所述的方法,其中,所述控制目标组件的组件副本 跟随所述拖拽输入移动之前,所述方法还包括:
    显示加载标识,所述加载标识用于指示根据所述目标组件标识生成所述组件副本。
  8. 根据权利要求1至6中任一项所述的方法,其中,所述目标组件为容器组件,在所述容器组件为除滑动容器组件之外的容器组件的情况下,在所述容器组件中添加组件的模式为独行添加模式。
  9. 根据权利要求8所述的方法,其中,所述容器组件的纵向尺寸随着所述容器组件中的各个组件的纵向尺寸自适应调整。
  10. 一种组件的控制装置,其中,所述装置包括:显示模块和控制模块;
    所述显示模块,用于显示编辑界面,所述编辑界面中包括组件库区域和画布区域;所述组件库区域内包括用于画布编辑的多个组件标识,每个组件标识用于指示一个组件,所述画布区域用于显示编辑的组件;
    所述控制模块,用于响应于对所述组件库区域中已选中的目标组件标识的拖拽输入,控制组件副本跟随所述拖拽输入移动;
    其中,所述目标组件标识用于指示目标组件,所述组件副本的显示内容与所述目标组件的显示内容相同。
  11. 一种电子设备,包括:存储器和处理器,所述存储器用于存储计算机程序;所述处理器用于在调用所述计算机程序时执行权利要求1-9中任一项所述的组件的控制方法。
  12. 一种计算机可读存储介质,其中,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-9中任一项所述的组件的控制方法。
  13. 一种计算机程序产品,其中,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-9中任一项所述的组件的控制方法。
PCT/CN2022/113547 2021-10-28 2022-08-19 一种组件的控制方法、装置、电子设备及存储介质 WO2023071452A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US18/569,983 US20240289004A1 (en) 2021-10-28 2022-08-19 Method of controlling component, apparatus, electronic device, and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202111265330.XA CN116048348A (zh) 2021-10-28 2021-10-28 一种组件的控制方法、装置、电子设备及存储介质
CN202111265330.X 2021-10-28

Publications (1)

Publication Number Publication Date
WO2023071452A1 true WO2023071452A1 (zh) 2023-05-04

Family

ID=86118719

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/113547 WO2023071452A1 (zh) 2021-10-28 2022-08-19 一种组件的控制方法、装置、电子设备及存储介质

Country Status (3)

Country Link
US (1) US20240289004A1 (zh)
CN (1) CN116048348A (zh)
WO (1) WO2023071452A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116383545A (zh) * 2023-06-05 2023-07-04 北京拓普丰联信息科技股份有限公司 一种网页报表模板的生成方法、装置、设备和介质
CN117251154A (zh) * 2023-09-26 2023-12-19 北京泰策科技有限公司 一种基于数据可视化的可快速扩展的低代码大屏设计系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2012155597A (ja) * 2011-01-27 2012-08-16 Azbil Corp 描画エディタおよび描画方法
WO2014128530A1 (zh) * 2013-02-25 2014-08-28 Liu Yong 一种基于gui平台的拖拽元素编程的方法及装置
CN107844297A (zh) * 2017-10-17 2018-03-27 广东广业开元科技有限公司 一种数据可视化实现系统及方法
CN110781423A (zh) * 2019-10-10 2020-02-11 腾讯科技(深圳)有限公司 网页生成方法、装置及电子设备
CN111966345A (zh) * 2020-08-21 2020-11-20 西安寰宇卫星测控与数据应用有限公司 拖拽式网页设计方法、装置、计算机设备、存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2012155597A (ja) * 2011-01-27 2012-08-16 Azbil Corp 描画エディタおよび描画方法
WO2014128530A1 (zh) * 2013-02-25 2014-08-28 Liu Yong 一种基于gui平台的拖拽元素编程的方法及装置
CN107844297A (zh) * 2017-10-17 2018-03-27 广东广业开元科技有限公司 一种数据可视化实现系统及方法
CN110781423A (zh) * 2019-10-10 2020-02-11 腾讯科技(深圳)有限公司 网页生成方法、装置及电子设备
CN111966345A (zh) * 2020-08-21 2020-11-20 西安寰宇卫星测控与数据应用有限公司 拖拽式网页设计方法、装置、计算机设备、存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116383545A (zh) * 2023-06-05 2023-07-04 北京拓普丰联信息科技股份有限公司 一种网页报表模板的生成方法、装置、设备和介质
CN116383545B (zh) * 2023-06-05 2023-08-25 北京拓普丰联信息科技股份有限公司 一种网页报表模板的生成方法、装置、设备和介质
CN117251154A (zh) * 2023-09-26 2023-12-19 北京泰策科技有限公司 一种基于数据可视化的可快速扩展的低代码大屏设计系统

Also Published As

Publication number Publication date
CN116048348A (zh) 2023-05-02
US20240289004A1 (en) 2024-08-29

Similar Documents

Publication Publication Date Title
WO2021104365A1 (zh) 对象分享方法及电子设备
WO2022156368A1 (zh) 推荐信息展示方法及装置
US10452333B2 (en) User terminal device providing user interaction and method therefor
WO2021115329A1 (zh) 应用程序的控制方法及电子设备
US11137876B2 (en) Information display method, device and terminal for displaying progress on application icon
WO2021036594A1 (zh) 一种应用于投屏场景的控制方法以及相关设备
US10643021B2 (en) Method and device for processing web page content
CN110069179B (zh) 图标控制方法及终端设备
WO2017008551A1 (zh) 弹幕显示方法及装置
CN108549519B (zh) 分屏处理方法、装置、存储介质和电子设备
WO2017129031A1 (zh) 信息获取方法及装置
CN107193451B (zh) 信息展示方法、装置、计算机设备及计算机可读存储介质
TW201519073A (zh) 一種終端裝置快捷回覆操作方法和終端裝置
KR20180094088A (ko) 그래픽 코드 디스플레이 방법 및 장치
WO2015014305A1 (en) Method and apparatus for presenting clipboard contents on a mobile terminal
WO2021104163A1 (zh) 图标整理方法及电子设备
WO2018161811A1 (zh) 一种基于h5的页面显示方法和终端
CN110888707A (zh) 一种消息发送方法及电子设备
JP2014164763A (ja) フィードバック提供方法及び端末
WO2023071452A1 (zh) 一种组件的控制方法、装置、电子设备及存储介质
WO2021004327A1 (zh) 应用权限设置方法及终端设备
CN115454286A (zh) 应用数据的处理方法、装置和终端设备
CN110971970B (zh) 视频处理方法及电子设备
WO2020181956A1 (zh) 应用标识的显示方法及终端设备
CN111124709A (zh) 一种文本处理方法及电子设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22885351

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 18569983

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 19.08.2024)