This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

Moving on to the Mixin widget,

The first is the water ripple effect

Is when the button is clicked, there will be a dynamic effect of water ripples

The code is also very simple to use, adding V-waves to an ordinary el-button is ok, adding this function to an existing button makes it very easy to change.

It is important to note here that the water ripple effect is not a component, but an instruction

import waves from '@/directive/waves/index.js' // Water ripple command
Copy the code

Import waves from waves.js and register vue.directive (‘waves’, waves), then vue.use

In waves.js, the effect of a wave of water is implemented through a series of calculations. To be honest, I didn’t look too closely, it was too difficult

Then the hover text dynamic effect

When floating, it moves left and right like a progress bar, using Mallki components

When used, pass a text argument as the content to display

Components are also mainly CSS, with CSS control cursor move to the right, and the text up and down disappear, display

The final component is a pull-down drawer like feature

The author named it “Share”. Originally, it was a square. After clicking on it, some contents would be expanded down to show more contents in the drawer.

On the realization, with DropdownMenu component, pass articleList as drawer content, title as the top open drawer button, click to expand or fold

Within the component, the span is the open button at the top, and the clickTitle event changes the state of isActive to change the active style of the entire large div. V-for is then used to traverse the item to generate the contents of the drawer.

The bottom-up folding of drawers is also implemented by CSS.