Ripple animation implementation method and system based on Vue custom instruction

Abstract

The invention provides a ripple animation implementation method and system based on a Vue custom instruction. The method comprises the following steps: creating a ripple animation Vue instruction; creating a ripple animation click event processing function in the ripple animation Vue instruction, and determining a ripple effect of the target element according to configuration parameters of the ripple animation click event processing function; a ripple animation Vue instruction is registered in the Vue application; and dynamically updating the ripple animation according to the update state of the target element based on the ripple animation Vue instruction. According to the application, a reusable, configurable and automatically managed Vue ripple animation instruction is realized based on a ripple animation binding technology of a Vue custom instruction, and the problems of complex realization of ripple animation, high code repetition, inflexible configuration and difficult resource management are solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular, to a wave animation implementation method and system based on Vue custom directive. BACKGROUND

[0002] With the rapid development of Internet technology and the continuous improvement of user requirements for interactive experience, user interface design pays more and more attention to detail experience and interactive feedback. As the most basic and important interactive element in the user interface, the click feedback effect of the button directly affects the user's operation experience. The traditional button click effect is usually only a simple color change or border change, which cannot provide sufficient visual feedback and is difficult to meet the higher requirements of modern users for interface interactive experience.

[0003] The popularity of modern front-end frameworks such as Vue.js makes component-based development the mainstream. Under the component-based development mode, how to integrate the wave animation, a common interactive effect, into the framework in a reusable and configurable way, becomes an important problem faced by front-end developers. The traditional button wave animation implementation method often needs to repeatedly write code in each component that needs wave effect, resulting in code redundancy and maintenance difficulty.

[0004] The current technical solutions for implementing button wave animation include CSS-only solution, native JavaScript implementation solution, third-party library solution, and component library built-in solution, but there are the following problems: 1. CSS-only solution: simple to implement, but limited in function, unable to dynamically generate wave according to click position, single animation effect, lack of flexibility; 2. Native JavaScript implementation solution: needs to manually manage the creation and destruction of DOM elements, handle the binding and unbinding of event listeners, complex code and prone to memory leakage problems; 3. Third-party library solution: usually needs to introduce additional dependencies, increases project size, and may not be compatible with the existing project technology stack; 4. Component library built-in solution: limited to specific UI component libraries, cannot be applied to custom elements, lacks universality.

[0005] Therefore, in actual development, developers need a technical solution that can meet the requirements of ripple animation visual effects and be easily integrated into the Vue.js framework. The technical problems to be solved include: implementing a reusable ripple animation mechanism to avoid repeatedly writing similar code in each component; providing flexible configuration options so that developers can customize ripple effects according to different scenarios; automatically managing the life cycle of ripple elements to avoid memory leaks and DOM element redundancy; accurately calculating the starting position of the ripple animation to provide real click position feedback; and deeply integrating with the Vue.js framework to automatically manage animation effects using the framework's life cycle mechanism. SUMMARY

[0006] To overcome the defects in the prior art, the purpose of the present application is to provide a ripple animation implementation method based on a Vue custom directive.

[0007] In a first aspect of the present application, a ripple animation implementation method based on a Vue custom directive is provided, comprising: creating a ripple animation Vue directive; creating a ripple animation click event handling function in the ripple animation Vue directive, and determining the ripple effect of a target element according to the configuration parameters of the ripple animation click event handling function; registering the ripple animation Vue directive in a Vue application; based on the ripple animation Vue directive, dynamically updating the ripple animation according to the update state of the target element.

[0008] Optionally, the creation of the ripple animation Vue directive comprises: defining a directive context identifier, which is used to store the handling function of the target element; creating a directive object and defining the life cycle hook function of the directive to determine the ripple animation Vue directive, the life cycle hook function of the directive including a bind hook function, an update hook function, and an unbind hook function.

[0009] Optionally, the bind hook function is used to bind event listeners and associate the ripple animation click event handling function with the target element. The update hook function is used to remove old event listeners and bind new event listeners when the parameters in the ripple animation Vue directive are updated. The unbind hook function is used to remove event listeners and clear context data when the task is completed.

[0010] Optionally, the creating a ripple animation click event processing function in the ripple animation Vue instruction, determining a ripple effect of a target element according to a configuration parameter of the ripple animation click event processing function, comprises: creating a ripple animation click event processing function; merging a default configuration parameter and a custom configuration parameter inside the ripple animation click event processing function to determine a configuration parameter of the ripple animation click event processing function, the configuration parameter comprising a target DOM element, a ripple diffusion style and a ripple color value; determining the ripple effect of the target element according to the configuration parameter of the ripple animation click event processing function, and determining the ripple animation Vue instruction.

[0011] Optionally, the determining the ripple effect of the target element according to the configuration parameter of the ripple animation click event processing function, comprises: setting a ripple animation style of the target element, the ripple animation style comprising an initial state style, an activated state style and a transition state style; determining a ripple element size of the ripple animation according to position information of the target element; determining a ripple element position of the ripple animation according to the configuration parameter of the target element; triggering a ripple animation according to the ripple animation style of the target element, the ripple element size of the ripple animation and the ripple element position of the ripple animation to determine the ripple effect of the target element.

[0012] Optionally, the registering the ripple animation Vue instruction in a Vue application, comprises: creating a directive installation function; automatically registering the ripple animation Vue instruction in a browser environment by using the directive installation function to determine a v-waves component; applying the v-waves component in a Vue component template and passing a custom configuration parameter by using a directive value to determine a ripple animation effect.

[0013] Optionally, the dynamically updating a ripple animation according to an updated state of the target element based on the ripple animation Vue instruction, comprises: detecting an updated state of a parameter in the ripple animation Vue instruction by using an update hook function; removing an old event listener when the parameter in the ripple animation Vue instruction is updated; rebinding a new event listener and applying an updated parameter; keeping context data synchronized and updated.

[0014] In a second aspect, the application provides a ripples animation implementation system based on a Vue custom directive, comprising: a Vue-based directive definition module configured to create a ripples animation Vue directive; a ripples animation click event handler creation module configured to create a ripples animation click event handler in the ripples animation Vue directive, and determine a ripples effect of a target element according to configuration parameters of the ripples animation click event handler; a ripples animation Vue directive registration module configured to register the ripples animation Vue directive in a Vue application; a ripples animation updating module configured to dynamically update a ripples animation according to an update state of the target element based on the ripples animation Vue directive.

[0015] In a third aspect, the application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the methods provided in the first aspect.

[0016] In a fourth aspect, the application provides an electronic device, comprising: a memory having a computer program stored thereon; a processor configured to execute the computer program in the memory to implement the steps of any of the methods provided in the first aspect.

[0017] The ripples animation implementation method based on a Vue custom directive provided in the application creates a ripples animation Vue directive, thereby enabling the ripples animation binding technology based on a Vue directive to quickly add a ripples click effect on any DOM element, simplifying repeated codes of the ripples animation and reusing the codes, enabling the configuration parameters of a ripples animation click event handler in the ripples animation Vue directive to be configured to customize the ripples animation forms according to different business scenarios, enabling the animation effect of the ripples to be flexibly configured, enabling the ripples animation to be dynamically updated according to an update state of a target element based on the ripples animation Vue directive, and enabling resources to be automatically managed, thereby overcoming the problems of existing ripples animation implementation, such as complexity, high code repetition, inflexible configuration, and difficult resource management.

[0018] Other technical effects brought by additional features will be further described in corresponding embodiments. BRIEF DESCRIPTION OF DRAWINGS

[0019] Other features, objects, and advantages of the application will become more apparent from the following detailed description of non-limiting embodiments with reference to the drawings: Figure 1 FIG. 1 shows a flowchart of a ripples animation implementation method based on a Vue custom directive according to an example embodiment.

[0020] Figure 2 FIG. 1 is a structural schematic diagram of a wave animation implementation system based on a Vue custom directive according to an example embodiment. DETAILED DESCRIPTION

[0021] The present application will be described in detail below with specific embodiments. The following embodiments will help those skilled in the art to further understand the present application, but do not limit the present application in any form. It should be noted that for those skilled in the art, without departing from the concept of the present application, a number of modifications and improvements can be made. These all belong to the protection scope of the present application.

[0022] The terms "comprise" and "have" and any variations thereof in the embodiments of the present application are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but can optionally include steps or units not listed, or can optionally include other steps or units inherent to these processes, methods, products or devices.

[0023] In addition, the terms "first", "second" are only for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include one or more of the features.

[0024] The existing technical solutions for implementing button wave animation include CSS-only solution, native JavaScript implementation solution, third-party library solution, and component library built-in solution. However, the CSS-only solution has single animation effect and lacks flexibility; the native JavaScript implementation solution requires manual management of the creation and destruction of DOM elements, and the code is complex and prone to memory leak problems; the third-party library solution introduces additional dependencies and increases project size; and the component library built-in solution lacks universality. Based on the above problems, the embodiments of the present application provide a wave animation implementation method based on a Vue custom directive to solve the above problems.

[0025] Figure 1 FIG. 1 is a structural schematic diagram of a wave animation implementation system based on a Vue custom directive according to an example embodiment.

[0026] Reference Figure 1 As shown in FIG. 1, an embodiment of the present application is a wave animation implementation method based on a Vue custom directive, which includes S11 to S14.

[0027] S11, create a wave animation Vue directive.

[0028] S12, a corrugation animation click event processing function is created in the corrugation animation Vue instruction, and the corrugation effect of the target element is determined according to the configuration parameters of the corrugation animation click event processing function.

[0029] S13, the corrugation animation Vue instruction is registered in the Vue application.

[0030] S14, based on the corrugation animation Vue instruction, the corrugation animation is dynamically updated according to the update state of the target element.

[0031] The above embodiments of the present application create a corrugation animation Vue instruction, so that the corrugation animation binding technology based on the Vue instruction can quickly add a corrugation click effect on any DOM element, simplify the repeated code of the corrugation animation, and reuse the code. By configuring the configuration parameters of the corrugation animation click event processing function in the corrugation animation Vue instruction, the corrugation animation performance form can be customized according to different business scenarios, the corrugation animation effect can be flexibly configured, the corrugation animation is dynamically updated based on the corrugation animation Vue instruction according to the update state of the target element, resource management is automatically realized, and the problems of complex corrugation animation implementation, high code repetition, inflexible configuration, and difficult resource management are overcome.

[0032] To create a corrugation animation Vue instruction, in some specific embodiments of the present application, for S11, the corrugation animation Vue instruction can be created by using S111 to S112.

[0033] S111, define the instruction context identifier.

[0034] Specifically, the instruction context identifier is used to store the processing function of the target element, and the processing function of the target element represents the processing function related to the target element.

[0035] S112, create an instruction object and define the life cycle hook function of the instruction to determine the corrugation animation Vue instruction.

[0036] Specifically, the life cycle hook function of the instruction includes a bind hook function, an update hook function, and an unbind hook function.

[0037] The bind hook function is used to bind the event listener and associate the corrugation animation click event processing function with the target element.

[0038] The update hook function is used to remove the old event listener and bind the new event listener when the parameters in the corrugation animation Vue instruction are updated.

[0039] The unbind hook function is used to remove the event listener and clear the context data when the task is completed.

[0040] Based on the above steps S11 to S14 and S111 to S112, by way of example, /

[0041] S11, Creating Ripple Animations: Vue Directive Handle click events to create ripple effects. @param {Element} el - The DOM element to which the directive is bound. @param {Object} binding - The object containing information related to the instruction binding. @returns {Function} returns the function that handled the click event. / S111 defines the instruction context identifier.

[0042] const context = '@@wavesContext' function handleClick(el, binding) { /

[0043] S12, create a ripple animation click event handler function in the ripple animation Vue directive, based on the ripple... The configuration parameters of the click event handler function for the ripple animation determine the ripple effect of the target element.

[0044] The function that actually executes the ripple animation logic @param {Event} e - Click event object / function handle(e) { ...... } / / Store the processing function in the element context for easy use during subsequent updates and destruction. if (!el[context]) { el[context] = { removeHandle: handle } } else { el[context].removeHandle = handle } return handle } export default { /

[0045] Called when the directive is bound, initialize the click event listener @param {Element} el - The element the directive is bound to @param {Object} binding - The directive binding information / bind(el, binding) { el.addEventListener('click', handleClick(el, binding), false) }, /

[0046] Called when the directive is updated, remove the old event listener and add the new one @param {Element} el - The element the directive is bound to @param {Object} binding - The new directive binding information / update(el, binding) { el.removeEventListener('click', el[context].removeHandle, false) el.addEventListener('click', handleClick(el, binding), false) }, /

[0047] Called when the directive is unbound, cleaning up event listeners and related data @param {Element} el - The element the directive is bound to / unbind(el) { el.removeEventListener('click', el[context].removeHandle, false) el[context] = null delete el[context] } } /

[0048] S13, register the wave animation Vue directive in the Vue application.

[0049] S112, create a directive object and define the directive's lifecycle hook functions to determine the wave animation Vue directive.

[0050] Install function, used to register Vue directives @param {Object} Vue - Vue constructor or Vue instance / const install = function(Vue) { Vue.directive('waves', waves) } / / If Vue already exists in the global object, automatically register the plugin if (window.Vue) { window.waves = waves Vue.use(install); / / eslint-disable-line } / / Mount the install method to the waves object waves.install = install export default waves S14, based on the wave animation Vue instruction, according to the update state of the target element, dynamically update the wave animation.

[0051] <el-button v-waves type="primary">Determination< / el-button> The above embodiments of the present application define the instruction context representation symbol, store the processing function of the target element, prevent global pollution; create a directive object and define the life cycle hook function of the instruction, use the bind hook function to associate the wave animation click event processing function with the target element, use the update hook function to monitor parameter updates and remove the old event listener and bind the new event listener, use the unbind hook function to remove the event listener and clear the context data, based on the event listening and resource automatic management mechanism, realize the automatic registration, update and destruction of the wave animation instruction, solve the technical problems of manual management of event listeners that are easy to cause memory leakage and event repeated binding.

[0052] To realize dynamic configuration of wave effect, in some specific embodiments of the present application, for S12, create a wave animation click event processing function in the wave animation Vue instruction, determine the wave effect of the target element according to the configuration parameters of the wave animation click event processing function, which can use S121 to S123.

[0053] S121, create a wave animation click event processing function.

[0054] Specifically, create a wave animation click event processing function handleClick, which is used to receive the target element and binding parameters as input.

[0055] S122, merge the default configuration parameters and the custom configuration parameters inside the wave animation click event processing function to determine the configuration parameters of the wave animation click event processing function.

[0056] Specifically, the configuration parameters include the target DOM element ele, the wave diffusion style type and the wave color value color.

[0057] Among them, the target DOM element ele is used to specify the wave effect; the default value of the wave diffusion style type is hit, and the default value of the wave color value color is rgba(0, 0, 0, 0.15).

[0058] S123, according to the configuration parameters of the wave animation click event processing function, determine the wave effect of the target element, determine the wave animation Vue instruction.

[0059] Specifically, step S123 can include S101 to S104.

[0060] S101, set the ripple animation style of the target element.

[0061] Specifically, the ripple animation style includes an initial state style, an active state style, and a transition state style.

[0062] The ripple animation style CSS implementation includes: Initial state style: transform: scale(0) and opacity:1; Active state style:.z-active class applies transform: scale(2) and opacity:0; Transition effect style: scale transition and opacity gradient are realized through the transition attribute.

[0063] By setting the ripple animation style of the target element, the correct display of the absolutely positioned ripple element is ensured.

[0064] S102, according to the position information of the target element, determine the size of the ripple element of the ripple animation.

[0065] Exemplarily: / / Merge user-defined configuration with default configuration const customOpts = Object.assign({}, binding.value) const opts = Object.assign({ ele: el, / / ripple acting element type: 'hit', / / hit click position expansion center point expansion color: 'rgba(0, 0, 0, 0.15)' / / ripple color }, customOpts) const target = opts.ele / / If the target element exists, perform ripple effect processing if (target) { / / Set the necessary style to support ripple display target.style.position ='relative' target.style.overflow = 'hidden' / / Get the position and size information of the element const rect = target.getBoundingClientRect() } S103, determine the position of the ripple element in the ripple animation based on the configuration parameters of the target element.

[0066] For example: / / Set the ripple start position according to type switch (opts.type) { case 'center': / / Centered diffusion mode: The ripples start from the center of the element ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px' ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px' break default: / / Click-based diffusion mode: The ripple starts from the clicked location. ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px' ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px' } In this embodiment, the ripple element position of the ripple animation supports two modes: click-based diffusion and center diffusion.

[0067] S104, according to the ripple animation style of the target element, the ripple element size of the ripple animation and the ripple element position of the ripple animation, triggering the ripple animation, determining the ripple effect of the target element.

[0068] Specifically, the embodiment can implement the animation effect through the CSS style class name switching.

[0069] Based on the above steps S121-S123, S101-S104, exemplarily: / / Find or create a ripple element let ripple = target.querySelector('.waves-ripple') if (!ripple) { ripple = document.createElement('span') ripple.className = 'waves-ripple' / / Set the ripple size to the maximum of the element width and height ripple.style.height = ripple.style.width = Math.max(rect.width,rect.height) + 'px' target.appendChild(ripple) } else { / / Reset the ripple class name ripple.className = 'waves-ripple' } / / Set the ripple color and activate the animation ripple.style.backgroundColor = opts.color ripple.className = 'waves-ripple z-active' return false /

[0070] Ripple effect style class Used to create water ripple animation effect when clicking / .waves-ripple { position: absolute; border-radius: 100%; background-color: rgba(0, 0, 0, 0.15); background-clip: padding-box; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 1; } /

[0071] Ripple effect style class for active state Define ripple spread animation effect / .waves-ripple.z-active { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); / Set transition animations for opacity and transform / -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6sease-out; transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; transition: opacity 1.2s ease-out, transform 0.6s ease-out; transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; } The above embodiments of this application employ dynamic configuration of ripple effect parameters, such as using configuration items like target DOM element ele, ripple diffusion style type, and ripple color value color. This allows for the customization of ripple animation presentation based on different business scenarios, solving the technical problem that existing ripple animation effects are monotonous and cannot flexibly adapt to different UI design needs.

[0072] In the embodiments of this application, the context of the event handling function is managed in the ripple animation click event handling function handleClick to ensure that it can be updated and destroyed correctly.

[0073] To register the ripple animation Vue directive and generate a reusable component, in some specific embodiments of this application, registering the ripple animation Vue directive in the Vue application in S13 can be done using S131 to S133.

[0074] S131, Create instruction installation function.

[0075] Specifically, the directive installation function is used to register the ripple animation Vue directive to the Vue instance.

[0076] For example, /

[0077] The installation function is used to register Vue directives. @param {Object} Vue - Vue constructor or Vue instance / const install = function(Vue) { Vue.directive('waves', waves) } / / If Vue has been loaded globally, automatically register the plugin if (window.Vue) { window.waves = waves Vue.use(install); / / eslint-disable-line } / / Mount the install method to the waves object waves.install = install export default waves S132, in a browser environment, automatically register the wave animation Vue directive by using the directive installation function, and determine the v-waves component.

[0078] S133, apply the v-waves component in the Vue component template, and pass the custom configuration parameters by using the directive value, to determine the wave animation effect.

[0079] Specifically, the Vue component template is a collection of Vue directive components.

[0080] Based on the above steps S131 to S133, exemplarily, /

[0081] Import the module collection file This file is used to uniformly export all custom directives and tool modules Convenient for other files to import the required functions in batches through destructuring assignment / import waves from '. / waves' / / Import the wave effect directive module /

[0082] Batch export all imported modules Make other modules can use these functions by destructuring import Including: wave effect and other utility tools / export { waves} / / Import the custom directives module collection file import as directives from '. / directive' / / Register global custom directives Object.keys(directives).forEach(k =>Vue.directive(k, directives[k])) / / Use custom directives in specific components <el-button v-waves type="primary">Determination< / el-button> The above embodiments of the present application adopt the wave animation binding technology based on Vue directive, which can quickly add wave click effect on any DOM element, solve the technical problem that traditional wave animation needs to manually write a large number of repetitive codes and is difficult to reuse. Based on the characteristics of Vue directive, developers can quickly apply wave effect by calling simple template syntax v-waves, which simplifies the development process.

[0083] To realize dynamic update of wave animation according to the update of target element, in some specific embodiments of the present application, for S14, based on the wave animation Vue directive, the wave animation is dynamically updated according to the update state of the target element, which can adopt S141 to S144.

[0084] S141, the update hook function is used to detect the parameter update state in the wave animation Vue directive.

[0085] S142, when the parameters in the wave animation Vue directive are updated, remove the old event listener.

[0086] S143, rebind the new event listener and apply the updated parameters.

[0087] S144, keep the context data synchronized and updated.

[0088] Specifically, by keeping the context data synchronized and updated, the resource is correctly managed.

[0089] Based on the above steps, S141 to S144, /

[0090] Call when the directive is bound, initialize the click event listener @param {Element} el - Element bound to the directive @param {Object} binding - Instruction binding information / bind(el, binding) { el.addEventListener('click', handleClick(el, binding), false) }, /

[0091] This function is invoked when the instruction is updated, removing the old event listener and adding the new one. @param {Element} el - The element to which the directive is bound. @param {Object} binding - New instruction binding information / update(el, binding) { el.removeEventListener('click', el[context].removeHandle, false) el.addEventListener('click', handleClick(el, binding), false) }, /

[0092] This function is invoked when the instruction is unbound, and it cleans up event listeners and related data. @param {Element} el - The element to which the directive is bound. / unbind(el) { el.removeEventListener('click', el[context].removeHandle, false) el[context] = null delete el[context]} In the embodiments described above, when updating parameters in the Vue directive for ripple animation, the update hook function is used to remove the old event listener and bind the new event listener, apply the updated parameters, and realize the update of the ripple animation. Based on event listeners, automatic resource management is achieved, solving the technical problem that manual management of event listeners can easily cause memory leaks.

[0093] This application provides a method for implementing ripple animation based on Vue custom directives. It offers a reusable, configurable, and automatically managed Vue ripple animation directive technology, overcoming the problems of complex ripple animation implementation, high code duplication, inflexible configuration, and difficult resource management in existing technologies.

[0094] This application provides a method for implementing ripple animation based on Vue custom directives. Based on the Vue.js directive system, it achieves ripple animation effects through custom directives. It fully utilizes the features of the Vue.js framework, encapsulating the implementation of ripple animation into a reusable directive. Developers can achieve ripple effects by adding the corresponding directives to the template using the simple template syntax v-waves, which greatly simplifies the development process and improves code reusability.

[0095] For example, developers can <el-button>Add v-waves instructions on elements, that is, add wave animation effects to buttons, which embodies convenience and practicality.

[0096] The application provides a wave animation implementation method based on a Vue custom instruction, which manages animation elements and event listeners through the instruction life cycle, avoiding the problem of manually managing resources in traditional implementations; stores target element-related processing functions using a context identifier, solving the problem of difficult event listener unbinding in Vue instructions; supports multiple diffusion modes and color customization through a method of dynamically configuring wave animation parameters, improving the flexibility and reusability of the solution; automatically handles the creation, update, and destruction of elements in the instruction life cycle, achieving full-automatic resource management of wave animations and avoiding memory leakage problems.

[0097] Illustratively, the application provides a wave animation implementation method based on a Vue custom instruction, and the specific implementation process is as follows: import '. / waves.css' const context = '@@wavesContext' /

[0098] Handle click events to create wave effects @param {Element} el - DOM element bound to the instruction @param {Object} binding - instruction binding-related information object @returns {Function} returns a function that handles click events / function handleClick(el, binding) { /

[0099] Actual function to execute wave animation logic @param {Event} e - click event object / function handle(e) { / / Merge user-defined configuration with default configuration const customOpts = Object.assign({}, binding.value) const opts = Object.assign({ ele: el, / / Wave effect element type: 'hit', / / hit Click position spread center Center point expansion color: 'rgba(0, 0, 0, 0.15)' / / Wave color }, customOpts ) const target = opts.ele / / If the target element exists, proceed with the ripple effect processing if (target) { / / Set the necessary styles to support wave display target.style.position ='relative' target.style.overflow = 'hidden' / / Get the position and size information of the element const rect = target.getBoundingClientRect() / / Find or create a wave element let ripple = target.querySelector('.waves-ripple') if (!ripple) { ripple = document.createElement('span') ripple.className = 'waves-ripple' / / Set the wave size to the maximum of the element width and height ripple.style.height = ripple.style.width = Math.max(rect.width,rect.height) + 'px' target.appendChild(ripple) } else { / / Reset the ripple class name ripple.className = 'waves-ripple' } / / Set the ripple starting position based on the type switch (opts.type) { case 'center': / / Centered spread mode: ripple starts from the element center ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px' ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px' break default: / / Click position spread mode: ripple starts from the click position ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px' ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px' } / / Set the ripple color and activate the animation ripple.style.backgroundColor = opts.color ripple.className = 'waves-ripple z-active' return false } } / / Store the handler function in the element context for later use when updating and destroying if (!el[context]) { el[context] = { removeHandle: handle } } else { el[context].removeHandle = handle } return handle } export default { /

[0100] Called when the directive is bound, initializes the click event listener @param {Element} el - The element the directive is bound to @param {Object} binding - The directive binding information / bind(el, binding) { el.addEventListener('click', handleClick(el, binding), false) }, /

[0101] Called when the directive is updated, removes the old event listener and adds the new one @param {Element} el - The element the directive is bound to @param {Object} binding - The new directive binding information / update(el, binding) { el.removeEventListener('click', el[context].removeHandle, false) el.addEventListener('click', handleClick(el, binding), false) }, /

[0102] Called when the directive is unbound, clean up event listeners and related data @param {Element} el - The element the directive is bound to / unbind(el) { el.removeEventListener('click', el[context].removeHandle, false) el[context] = null delete el[context] } } /

[0103] Install function, used to register the Vue directive @param {Object} Vue - Vue constructor or Vue instance / const install = function(Vue) { Vue.directive('waves', waves) } / / If Vue already exists in the global object, automatically register the plugin if (window.Vue) { window.waves = waves Vue.use(install); / / eslint-disable-line } / / Mount the install method to the waves object waves.install = install export default waves / / Import the custom directive module collection file import as directives from '. / directive' / / Register global custom directives Object.keys(directives).forEach(k =>Vue.directive(k, directives[k])) / / Use custom directives in specific components <el-button v-waves type="primary">Determination< / el-button> /

[0104] Ripple effect style class Used to create a water ripple animation effect when clicked / .waves-ripple { position: absolute; border-radius: 100%; background-color: rgba(0, 0, 0, 0.15); background-clip: padding-box; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 1; } /

[0105] Active state ripple effect pattern class Define ripple spread animation effect / .waves-ripple.z-active { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); / Set transition animations for opacity and transform / -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; transition: opacity 1.2s ease-out, transform 0.6s ease-out; transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; } The preferred features in the above embodiments can be used alone in any embodiment, and can also be used in any combination as long as they do not conflict with each other. In addition, parts not described in detail in the embodiments can be implemented using existing technologies.

[0106] The present application will be further described below in conjunction with specific application examples / contrastive examples, so as to better understand the above technical solutions of the present application. It should be understood that the following are only some examples and do not limit the present application.

[0107] ​​​​​​​​​​​​​​​​​​​​​​​​​Embodiment Example 1: Using the wave animation implementation method based on Vue custom directive provided in the present application, a button wave animation is implemented in a Vue project. Implementation process: System environment preparation Development environment: Vue.js 2.x project Technology stack: Vue + Element UI + SCSS Project structure: Organize the code according to the standard Vue project structure Directive module integration: Integrate the wave animation directive into the project according to the following steps: Step 1: Add wave animation related files to the project Create the src / directive / waves / directory Add the waves.js, waves.css, and index.js files Import and export the waves directive in src / directive / index.js Step 2: Register the directive globally in the project entry file import Vue from 'Vue' import { waves} from '. / directive' Vue.use(waves) Specific application: Apply the wave animation directive in Vue components: <el-button v-waves type="primary">Determination< / el-button> Custom configuration application: Achieve custom wave effects by passing a configuration object: <!-- Center spreading red wave --> <el-button v-waves="{type: 'center', color: 'rgba(255,0,0,0.3)'}"> center corrugation <!-- Click position spreads blue wave --> <el-button v-waves="{type: 'hit', color: 'rgba(0,0,255,0.2)'}"> positional ripples In the above embodiments of the present application, when the user clicks the "OK" button, a circular wave spreading effect is generated from the click position, and the wave gradually spreads from transparent to opaque and disappears, providing intuitive visual feedback. By configuring parameters, different colors and different spreading methods of wave effects can be achieved to meet different UI design requirements, with flexible configuration. Wave elements are created and destroyed on demand, avoiding DOM redundancy and ensuring page performance. The wave animation effect can be displayed normally in mainstream browsers, with compatibility.

[0108] Embodiment 2: A ripples animation implementation method based on a Vue custom directive provided by the present application is used to implement ripples animation on a card component. <h3>Card title< / h3> Card content The list item ripples effect adds ripples animation to the list item: <li v-waves v-for="item in list" :key="item.id"> {{ item.name}} The above embodiments of the present application provide clear click feedback when a large area element is clicked, with ripples spreading from the click position to cover the entire element area. Different types of elements have uniform ripples animation effects, improving the consistency of user experience.

[0109] Embodiment 3: A ripples animation implementation method based on a Vue custom directive provided by the present application is used in a theme switching scenario to dynamically change the ripples color according to the application theme, achieving dynamic configuration update: <template> <button v-waves="{color: themeColor}" @click="handleClick"> Subject button < / button> < / template> <script>export default {data() {return {isDarkTheme: false}},computed: {themeColor() {return this.isDarkTheme ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.15)'}}}< / script> The permission control scenario changes the ripples animation type according to user permissions: <button v-waves="{type: userRole === 'admin' ? 'center' : 'hit'}"> Operating button < / button> The above embodiments of the present application can dynamically adjust the effects of ripples animation according to application states without the need to rebind events, with dynamic adaptability. When the binding value changes, the ripples animation immediately applies new configuration parameters, achieving configuration implementation update.

[0110] The ripples animation implementation method based on a Vue custom directive provided by the present application deeply integrates the Vue.js framework and fully utilizes the framework features to achieve functionality, with ease of use. Developers only need to add a v-waves directive to an element to achieve ripples animation effects, greatly simplifying the development process. Through the lifecycle management of Vue directives, resource creation and destruction are automatically handled, avoiding memory leakage problems and ensuring maintainability. The method supports multiple configuration options and can adapt to different scenarios of ripples animation needs, with scalability. Ripples elements are created on demand, avoiding unnecessary DOM operations and ensuring page performance, with performance optimization. The ripples animation implementation method based on a Vue custom directive provided by the present application not only meets the needs of modern web applications for interactive experience, but also has good maintainability and scalability.

[0111] Figure 2 FIG. 1 shows a structural schematic diagram of a ripples animation implementation system based on a Vue custom directive according to an example embodiment.

[0112] Reference Figure 2 As shown, an embodiment of the present application provides a ripples animation implementation system 100 based on a Vue custom directive, comprising: a Vue-based directive definition module 110, a ripples animation click event processing function creation module 120, a ripples animation Vue directive registration module 130, and a ripples animation update module 140.

[0113] The Vue-based directive definition module 110 is configured to create a ripples animation Vue directive. The ripples animation click event processing function creation module 120 is configured to create a ripples animation click event processing function in the ripples animation Vue directive, and determine a ripples effect of a target element according to a configuration parameter of the ripples animation click event processing function. The ripples animation Vue directive registration module 130 is configured to register the ripples animation Vue directive in a Vue application. The ripples animation update module 140 is configured to dynamically update the ripples animation based on the ripples animation Vue directive and according to an update state of the target element.

[0114] The above embodiments of the present application create a ripples animation Vue directive, so that the ripples animation binding technology based on the Vue directive can quickly add a ripples click effect on any DOM element, simplify repeated codes of the ripples animation, and reuse the codes. By configuring a configuration parameter of the ripples animation click event processing function in the ripples animation Vue directive, the ripples animation performance form can be customized according to different business scenarios, the ripples animation effect can be flexibly configured, the ripples animation can be dynamically updated based on the ripples animation Vue directive and according to the update state of the target element, and resource automatic management is achieved, thereby overcoming the problems of complex ripples animation implementation, high code repetition, inflexible configuration, and difficult resource management.

[0115] As to the embodiments of the above system, the specific manners in which the various modules perform operations have been described in detail in the embodiments of the method, and will not be described here in detail.

[0116] Based on the same technical concept, in some specific embodiments of the present application, a terminal comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor can be used to execute the method when executing the program.

[0117] Based on the same technical concept, in some specific embodiments of the present application, a computer readable storage medium stores a computer program, and the program can be used to execute the method when executed by a processor.

[0118] Optionally, a memory is configured to store a program; the memory can include volatile memory (e.g., random-access memory (RAM), such as static random-access memory (SRAM), Double Data Rate Synchronous Dynamic Random Access Memory (DDR SDRAM), etc.), and / or non-volatile memory (e.g., flash memory). The memory is configured to store computer programs (e.g., application programs, functional modules, etc. for implementing the above-described methods), computer instructions, etc. The computer programs, computer instructions, etc. described above can be stored in one or more memories in a partitioned manner. Moreover, the computer programs, computer instructions, data, etc. described above can be invoked by the processor.

[0119] The computer programs, computer instructions, etc. described above can be stored in one or more memories in a partitioned manner. Moreover, the computer programs, computer instructions, data, etc. described above can be invoked by the processor.

[0120] The processor is configured to execute the computer programs stored in the memory to implement each step in the methods described above in relation to the embodiments. Details can be found in the descriptions of the methods above.

[0121] The processor and the memory can be independent structures, or can be integrated into an integrated structure. When the processor and the memory are independent structures, the memory and the processor can be coupled by a bus.

[0122] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROMs, optical storage media, etc.) containing computer-usable program code.

[0123] The computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart or flowsheet block or blocks. Figure 1 one or more flowcharts and / or blocks Figure 1 one or more flowcharts and / or blocks

[0124] These computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture including instructions which implement the function specified in the flowchart or flowsheet block or blocks. Figure 1 one or more flowcharts and / or blocks Figure 1 one or more flowcharts and / or blocks

[0125] The computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart or flowsheet block or blocks. Figure 1 one or more flowcharts and / or blocks Figure 1 one or more flowcharts and / or blocks

[0126] The above describes some specific embodiments of the present application. It needs to be understood that the present application is not limited to the above specific embodiments, and those skilled in the art can make various modifications or changes within the scope of the claims, which does not affect the essence of the present application. The above preferred features can be used in combination in the case of no conflict.

Claims

1. A method for implementing ripple animation based on Vue custom directives, characterized in that, include: Vue directive to create ripple animation; Create a ripple animation click event handler function in the ripple animation Vue directive, and determine the ripple effect of the target element according to the configuration parameters of the ripple animation click event handler function; Register the ripple animation Vue directive in your Vue application; Based on the Vue directive for ripple animation, the ripple animation is dynamically updated according to the update state of the target element.

2. The method for implementing ripple animation based on Vue custom directives according to claim 1, characterized in that, The Vue directive for creating ripple animations includes: Define an instruction context identifier, which is used to store the processing function of the target element; Create an instruction object and define the lifecycle hook functions of the instruction. Determine the ripple animation Vue instruction. The lifecycle hook functions of the instruction include the bind hook function, the update hook function, and the unbind hook function.

3. The method for implementing ripple animation based on Vue custom directives according to claim 2, characterized in that, The bind hook function is used to bind an event listener and associate the ripple animation click event handling function with the target element; The update hook function is used to remove the old event listener and bind the new event listener when the parameters in the Vue directive of the ripple animation are updated; The unbind hook function is used to remove event listeners and clear context data when the task ends.

4. The method for implementing ripple animation based on Vue custom directives according to claim 1, characterized in that, The step of creating a ripple animation click event handler function in the ripple animation Vue directive, and determining the ripple effect of the target element according to the configuration parameters of the ripple animation click event handler function, includes: Create a click event handler function for the ripple animation; The default configuration parameters and custom configuration parameters are merged within the ripple animation click event handling function to determine the configuration parameters of the ripple animation click event handling function. The configuration parameters include the target DOM element, the ripple diffusion style, and the ripple color value. Based on the configuration parameters of the ripple animation click event handling function, the ripple effect of the target element is determined, and the ripple animation Vue directive is determined.

5. The method for implementing ripple animation based on Vue custom directives according to claim 4, characterized in that, Determining the ripple effect of the target element based on the configuration parameters of the ripple animation click event handling function includes: Set the ripple animation style of the target element, the ripple animation style includes the initial state style, the active state style and the transition state style; The size of the ripple element in the ripple animation is determined based on the position information of the target element. The position of the ripple element in the ripple animation is determined based on the configuration parameters of the target element. Based on the ripple animation style of the target element, the size of the ripple element in the ripple animation, and the position of the ripple element in the ripple animation, the ripple animation is triggered to determine the ripple effect of the target element.

6. The method for implementing ripple animation based on Vue custom directives according to claim 1, characterized in that, Registering the ripple animation Vue directive in a Vue application includes: Create the instruction installation function; In a browser environment, the Vue directive for the ripple animation is automatically registered using the instruction installation function, and the v-waves component is determined. Apply the v-waves component in the Vue component template and use directive values ​​to pass custom configuration parameters to determine the ripple animation effect.

7. The method for implementing ripple animation based on Vue custom directives according to claim 3, characterized in that, The step of dynamically updating the ripple animation based on the Vue directive and the update state of the target element includes: The update hook function is used to detect the parameter update status in the Vue directive of the ripple animation; When the parameters in the Vue directive for the ripple animation are updated, the old event listener is removed; Rebind the new event listener and apply the updated parameters; Keep context data updated in sync.

8. A ripple animation implementation system based on Vue custom directives, characterized in that, include: A Vue directive definition module for creating ripple animation Vue directives; The ripple animation click event handling function creation module is used to create ripple animation click event handling functions in the ripple animation Vue directive, and determine the ripple effect of the target element according to the configuration parameters of the ripple animation click event handling function; The ripple animation Vue directive registration module is used to register the ripple animation Vue directive in a Vue application; The ripple animation update module is used to dynamically update the ripple animation based on the ripple animation Vue directive and the update status of the target element.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the program implements the steps of the method described in any one of claims 1-7.

10. An electronic device, characterized in that, include: A memory on which computer programs are stored; A processor for executing the computer program in the memory to implement the steps of the method according to any one of claims 1-7.

Images