Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to write a plug-and-play Vue Loading plug-in", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to write a plug-and-play Vue Loading plug-in" article.

Start with the way you use it

Loading plug-ins, whether written from 0 or downloaded directly, are abstracted as a component to load Loading when needed, or to manually show or hide through API

... this.$wait.show () await fetch ('http://example.org')this.$wait.hide()

Or switch between components through the state of Loading

. To register as a global state, you also need to add an interceptor to the network request packet of the axios class, and then set a global Loading status. Each time there is a network request or according to the URL that has been set, the Loading status is set to load, and after the request is completed, it is set to complete.

Register the axios interceptor:

Let loadingUrls = [`${apiUrl} / loading/`, `${apiUrl} / index/`, `${apiUrl} / comments/`,...] Axios.interceptors.request.use ((config) = > {let url = config.url if (loadingUrls.indexOf ('url')! =-1) {store.loading.isLoading = true}}) axios.interceptors.response.use ((response) = > {let url = response.config.url if (loadingUrls.indexOf (' url')! =-1) {store.loading.isLoading = false}})

When in use, get the loading status under each component, and then determine when to display the loading and when to display the real component.

... Components: {loader}, computed: {isLoading: this.$store.loading.isLoading}, async getMainContent () {/ / State can only be changed through mutations. This.$sotre.loading.isLoading = false await axios.get ('...') This.$sotre.loading.isLoading = false}, async getMain () {await getMainContent ()}...

It works well when there is only one state under the current page that requires Loading, but if there are many different components under the same page that all need Loading, you also need to mark it according to different components so that the loaded components do not repeatedly enter the Loading state. As business continues to grow, repeated Loading judgments are enough to be irritating.

Sort out ideas

The core of Loading is very simple, that is, you need to display Loading when you request the server, and then restore it back after the request. This idea is easy to implement, but the way of use can not escape the explicit call above. From a point of view, there are places where Loading can be set up.

Set the global intercept and set the status to load before the request starts.

Set the global intercept, and set the status to complete after the request is completed.

Intercept in the function that triggers the request. It is set to load before triggering and to complete after triggering.

Determine whether the data after the request is non-empty, and if not, set it to complete

Finally, if it can be realized, the global interception setting and local judgment are the easiest to think of and the easiest to implement. Setting before and after for each triggered function looks beautiful, but it is a disaster to implement. We don't have two function hooks, before and after, to tell us when the function has been called and finished. There are a lot of holes in our own implementation. If you don't have to implement it, you can only write it in the original function one by one. It is very limited to judge the data only. There is only one chance.

Since it is a plug-and-play plug-in, it has to be easy to use, and the basic idea is to use global interception, but the local judgment is slightly different from the conventional, using data binding (of course, you can also respond to interception globally again). Let's do it.

Style

Loading, there must be a circle to call Loading, style is not the most important part of this plug-in, here directly use CSS to implement an easy to implement without looking very rough:

.. loading {width: 50px; height: 50px; border: 4px solid rgba; border-radius: 50%; border-left-color: red; animation: loading 1s infinite linear;} @ keyframes loading {0% {transform: rotate (0deg)} 100% {transform: rotate (360deg)}}

Fixed the size of the square of 50px, use border-radius to make it more round, border set a progress bar base, border-left-color set to the progress bar.

Demo address

Bind data to URL

Provide external user interface

As mentioned in the above idea, this plug-in is made using global interception and data binding:

Expose a source property to get the data to bind from the component being used.

Expose a urls property to get the URL to intercept from the component being used.

.. export default {props: {source: {require: true}, urls: {type: Array, default: () = > {new Array ()}}, data () {return {isLoading: true}}, watch: {source: function () {if (this.source) {this.isLoading = false}.

Don't worry about what type of data source is, we just need to monitor it and set the Loading status to complete with each change, urls. We'll improve it later.

Set up request interceptor

The action required in the interceptor is to press each URL at the time of the request into a container and delete it after the request.

Vue.prototype.__loader_checks = [] Vue.prototype.$__loadingHTTP = new Proxy ({}, {set: function (target, key, value, receiver) {let oldValue = target [key] if (! oldValue) {Vue.prototype.__loader_checks.forEach ((func) = > {func (key, value)})} return Reflect.set (target, key, value Receiver)}}) axios.interceptors.request.use (config = > {Vue.prototype.$__ loading HTTP [config.url] = config return config}) axios.interceptors.response.use (response = > {delete Vue.prototype.$__loadingHTTP [response.config.url] return response})

Mount it on the Vue instance so that we can call it later, of course, you can also use Vuex, but this plug-in needs to highlight a lack of dependencies, so Vuex is not needed.

Data mounted directly on Vue cannot be monitored through computed or watch. We use the Proxy agent to intercept the set method and do something whenever a request for URL is pressed. Vue.prototype.__loader_checks is used to store events that load when the instantiated component subscribes to the URL request, so that every time there is a URL load, it is distributed to the subscribed instantiated Loading component through Proxy.

Subscribe to URL events

.. export default {props: {source: {require: true}, urls: {type: Array, default: () = > {new Array ()}}, data () {return {isLoading: true}}, watch: {source: function () {if (this.source) {this.isLoading = false} Mounted: function () {if (this.urls) {this.__loader_checks.push ((url, config) = > {if (this.urls.indexOf (url)! = =-1) {this.isLoading = true}.

Each is a brand new instance, so you can subscribe to URL events directly in mounted. As long as a urls is passed, each subscribed object in _ _ loader_checks will be published. After receiving the release, the Loader instance will determine whether the URL corresponds to its own registration, and the corresponding will set its own status back to load, and the URL request will inevitably cause data updates. At this point, the source we monitored above will work to set the load status back to completion.

Use slots to fit the original components

After writing the above, you may have some questions about how to hide the parts that should not be displayed in Loading. The answer is to use slots to fit.

Export default {props: {source: {require: true}, urls: {type: Array, default: () = > {new Array ()}}, data () {return {isLoading: true}}, watch: {source: function () {if (this.source) {this.isLoading = false} Mounted: function () {if (this.urls) {this.__loader_checks.push ((url, config) = > {if (this.urls.indexOf (url)! = =-1) {this.isLoading = true}.

It is also judged by isLoading that the circle is displayed if it is loaded, otherwise the slot passed in the parent component is displayed.

Note that Vue has a strange BUG here.

Sometimes, if the sibling tag appears both v-if and CSS selector and the style is scoped, then the style set with the CSS selector will be lost, if the key is not set, the loading style will be lost, in addition to setting key, you can also make it nested.

Register as a plug-in

There are four ways to register plug-ins in Vue. Here we use mixin to mix into each instance for ease of use, and we also register the above axios interceptor here.

Import axiosimport Loader from'. / loader.vue'export default {install (Vue, options) {Vue.prototype.__loader_checks = [] Vue.prototype.$__loadingHTTP = new Proxy ({}, {set: function (target, key, value, receiver) {let oldValue = target [key] if (! oldValue) {Vue.prototype.__loader_checks.forEach ((func) = > {func (key) Value)})} return Reflect.set (target, key, value Receiver)}}) axios.interceptors.request.use (config = > {Vue.prototype.$__ loadingHTTP [config.url] = config return config}) axios.interceptors.response.use (response = > {delete Vue.prototype.$__ loadingHTTP [response.config.url] return response}) Vue.mixin ({beforeCreate () {Vue.component ('vmerloader') Loader)})}

Use

Use plug-ins in the portal file

Import Loader from'. / plugins/loader/index.js'...Vue.use (Loader).

Can be used in any component without import

{{msg}}

Automatically display and hide the Loading according to the bound data and the bound URL. There is no need to manually set whether the isLoading should be hidden, nor do you need to call show and hide to patch the requested method.

Other

The above determines whether the response has been made by binding the data. If the requested data will not be updated, you can also intercept and subscribe to the publishing mode in the response of axios.

The above is about the content of this article on "how to write a plug-and-play Vue Loading plug-in". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.