2. Login module—form and particle effects

Table of contents

1. Creation of form components

The component library used in this project is element plus, which is a component library developed for our use based on Vue2 and Vue3.

1. Build the most original element plus

2. Use element plus

3. Implement login jump function

4. Write style

We encountered a problem with the style here, that is, we clearly set color: white in the formContainer. Why are the colors of our username and password black? So let's find out the reason. First of all, it may be because it is wrapped by some tags. We can go directly into the tag and set a color for its background.

We will find that changing the style in this way is useless. Why? In fact, it is also a knowledge point of our vue.

Because the scoped local scope we are using now, why can it actually have a local effect? Its principle is to produce a unique attribute for our component . In this way, we can make the only attribute selector in this css here. This css

Only the styles we set will be selected for those with this attribute. Then in the style we write here in the head, we can see that formContainer will be selected only if it has this attribute.

Similarly, label will make a selection only if it has these attributes. So let's see if label has this attribute?

We can see that the label itself does not have this attribute. Because we use other people’s components in this Vue system, it can only add these corresponding special attributes to this layer of the component.

However, there may be many tags inside this component that cannot be added with this unique attribute, which will lead to such a problem. Without this unique attribute, the style we write cannot affect this tag, which is one of the reasons why scoped is not easy to use. The solution is to just make it a global effect.

Adding scoped won't work, because the style at this time requires a unique attribute selector. We are using other people's components, and the tags inside other people's components cannot add our external attribute, so what should we do? Woolen cloth? This requires the use of a deep style selection in vue3. Just wrap a deep outside our label and that's it.

2. Particle effect

A very classic particle library website https://particles.js.org/

Here you can use pure JS to reference, or all front-end frameworks based on vue, react, etc. can integrate a library like particles for use. The effect is based on these particles drawn on canvas. In fact, it is mainly to make our login page look good.

Here we are using the vue3 version.

1.Introduce and install particle library components

2. Use the particle library

Copy and paste the first configuration in the official document

You also need to install tsparticles here. Although there is no official documentation, if you don't install it, you will get an error. It requires a loadFull call through tsparticles so that the particle library can be started.

We took out the things in options, because there were too many, and it was too ugly to put them there, so we made a separate file called particle configuration file. We created a util folder under the src folder and put it in it. Tool code tool logic tool folder, and then create config.js in it.

We can find other effects to use in the official documentation

Then we can just copy and paste it and replace the previous one.

After seeing the effect, we found that it covered our form, so we have to adjust our own hierarchy.

We are making a background image. In fact, it also has a background image. However, there may be problems loading its background image. There is no problem loading my project image.

Let's change our background image. The photos are placed in the public folder, and the path can be found directly by "/xxx.jpg". Because public is our resource folder, you can directly access its contents by the root path using "/". Arrange the pictures where you want.