Problems encountered

Those of you who often use VUE are familiar with element-UI’s pop-up components. In order to optimize performance, Element will not render the content in the pop-up body before it is opened for the first time. In general, there is no problem with such setting. But in some special cases, there may be a problem.

It happened to be an accidental requirement that led to the thinking of this problem. Vue-monovaoch-slide -verify this component may have been used by many people. It is a vUE slide verification component, it is very simple to use, directly introduce registration, you can use it directly as a component. After the user enters the password, a swipe verification box is displayed, and the login starts after success.

So here is the problem, the vue-monovaoch-slid-verif component has an initial resource load time, when we wrap it up in an el-Dialog and use it, the first time the pop-up is opened, the component starts to load, there is a longer load time when the network is not very fast, and the load animation is not very obvious, It’s a white mask flashing, and an unsuspecting user might think the page won’t load.

So if you can get el-Dialog to render the component ahead of time, there is a period of time to load the data while the user enters the account password. Looking at the Element documentation, el-Dialog has no preloaded parameters in the API, so how does El-Dailog render the component the first time it is opened?

To find root cause

Let’s keep scrolling through the source code for El-Dialog

You can see that the body part is rendered using the Rendered parameter, Rendered using the Rendered parameter

el

Rendered is an internal parameter in El-Dialog, and after the first opening, El-Dialog sets it to true, after which the body content is rendered.

To solve the problem

Once we know the implementation of The El-Dialog code, it’s very easy to solve this problem, just make the Rendered parameter true when it’s not open.

He is an internal parameter that doesn’t expose the API, but he can be modified directly through a popup instance and done

The Dialog instance is called directly in our Mounted event, rendered to True, and the body content is ready to render. Try it again

So much faster, you can hardly see the white loading process.

further

The above processing basically meets our needs, but can we go further? For example, if there are many similar requirements, we need to write one processing every time in the business logic, which is very inconvenient. The processing needs to be in the Mounted event, otherwise we cannot get the popup instance. It also takes time (albeit very fast) to mount a popup instance, so it’s best to encapsulate one and use it as a separate component.

Vue just provides such an API, so that we can very easily extend components.

With extends we can keep all the functionality from which the component came, just add the logic we need, and without further comment, just go to the code:

<script> import { Dialog } from "element-ui"; export default { extends: Dialog, props: { preload: { type: Boolean, default: false, }, }, created() { this.preload && (this.rendered = true); }}; </script>Copy the code

With a simple extension, we can use the preload parameter directly to control whether the popup needs to be pre-rendered. You can refresh the page and see that He has rendered Rendered to True using dev-tools.

The code is very simple, mainly to share the idea.