Element Loading

Vue2. X Official document

1 loading

1.1 Requirements

Realize dynamic effect display when loading data

<template> <transition name="y-loading-fade" @after-leave="handleAfterLeave"> <div v-show="visible" class="y-loading-mask" :style="{backgroundColor: background || ''}" :class="[ customClass, { 'is-fullscreen': fullscreen, }]"> <div class="y-loading-spinner"> <svg v-if="! spinner" class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none"/> </svg> <p v-if="text" class="y-loading-text">{{text}}</p> </div> </div> </transition> </template>Copy the code

1.2 Two types

According to father’s Day loading can be divided into two kinds, global loading and local loading. Document. body is the parent of the global load and options.target is the parent of the local load.

Global loading

Parent: documnet. Body

The partial loading

Parent node :loading the passed parameter options.target

1.3 Loading Parameters

options

parameter	instructions	type	An optional value	The default value
taeget	Loading The DOM node to be overwritten. You can pass in a DOM object or string; If a string is passed, it is passed as an argument to document.querySelectory to get the corresponding DOM node	object/string	–	document.body
spinner	Whether to display the load icon	string	–	null
background	Mask the background color	string	–	null
text	Load copy displayed below the load icon	string	–	null
fullscreen	V-loading modifier, whether it is loaded globally or locally	boolean	–	true
body	V – loading modifier	boolean	–	false

1.4 Invocation Method

1.4.1 this. $loading (options)

Mount Loading to Vue’s prototype chain

Vue.prototype.$loading = Loading.service;
Copy the code

For example (call loading and turn off loading every 3s)

Let loading = this.$loading({text: 'loading... '}); setTimeout(() => { loading.close(); // close loading}, 3000);Copy the code

1.4.2 instruction

Register the v-loading command and invoke it in the form of the v-loading command

// Register custom directives
Vue.directive('loading', {
    bind: function(el, binding, vnode) {
        const textExr = el.getAttribute('loading-text');
        const spinnerExr = el.getAttribute('loading-spinner');
        const backgroundExr = el.getAttribute('loading-background');
            
        const vm = vnode.context;
            
        const mask = new Mask({
            el: document.createElement('div'),
            data: {
                text: vm && vm[textExr] || textExr,
                spinner: vm && vm[spinnerExr] || spinnerExr,
                backgrond: vm && vm[backgroundExr] || backgroundExr,
                fullscreen:!!!!! binding.modifiers.fullscreen, }, }); el.instance = mask; el.mask = mask.$el; el.maskStyle = {}; binding.value && toggleLoading(el, binding); },update: function(el, binding) {
        el.instance.setText(el.getAttribute('loading-text'));
        if(binding.oldValue !== binding.value) {
            toggleLoading(el, binding);
        }
    },

    unbind: function(el, binding) {
        if(el.domInserted) {
            el.mask &&
            el.mask.parentNode &&
            el.mask.parentNode.removeChild(el.mask);

            toggleLoading(el, {
                value: false.modifiers: binding.modifiers, }); } el.instance && el.instance.$destroy(); }});Copy the code

For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.

<template> <div> <p class="test" v-loading="loadingFlag" loading-text=" test v-loading instruction "> Test v-loading instruction </p> <! -- <p class="test" v-loading.body="loadingFlag" loading-text=" test v-loading instruction "> test v-loading instruction </p> --> <! -- <p class="test" v-loading.body.fullscreen="loadingFlag" loading-text=" test v-loading instruction "> Test v-loading instruction </p> --> <h4> </h4> < H4 > I love you, you love me, </h4> <h4> </h4> </div> </template> <script> export default {data() {return {loadingFlag: true,}}, watch: { loadingFlag: { immediate: true, handler(newValue) { console.log('newValue', newValue); },},}, created() {this.name = "v-loading instruction "; }, mounted() { setTimeout(() => { this.loadingFlag = false; }, 1000); }, } </script> <style scoped> </style>Copy the code

1.5 Review the old and learn the new

1.5.1 Vue2. x Custom command

The official documentation

1.5.2 Difference between className attribute and classList attribute of javascript Element

The className property and the classList property are both Dom properties and they both manage class values except that the classList property is a special DOMTokenList object, The className attribute is a plain string (multiple class names are delimited by Spaces). Compatibility: The classList attribute was not supported in IE until version 9, but has been since version 10. However, the add and remove methods are not supported. Other browsers support this property and the methods add and remove with it

Checks whether the specified class name exists on the specified node

@param {Node} el element Node * @param {String} CLS class name ** @returns Boolean * false: does not exist * true: does exist ** Contains (container, contained): Check whether the specified element contains another element. * Is it because Vue itself has introduced jQuery? * * className attribute and classList attribute: The className attribute and the classList attribute are Dom attributes and both manage class values. The difference is that the classList attribute values are special DOMTokenList objects. * The className attribute is a normal string. * * For compatibility reasons, Internet Explorer (IE) did not support the classList attribute at all until version 9, and has supported it since version 10. * */ export function hasClass(el, CLS) {if(! el || ! cls) return false; If (cls.indexof (' ')! == -1) throw new Error('className should not contain space.'); // Check whether CLS class name exists on node EL // How to check // two ways: El. The className. Split (' ') | el. ClassList / / attribute value for DOMTokenList classList, about DOMTokenList official explanation is a set of tags, space-delimited like Array has a length attribute, And the index starts at 0, but cannot use Array object methods. // DOMTokenList contains the add, remove, and contains methods. So we can use add, If (el.classlist) {// Contains the class name. If (el.classlist) contains the class name, return true, otherwise return false return el.classList.contains(cls); } else { return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1; }}Copy the code

Adds the class name to the specified element node (separated by Spaces if there are more than one)

/** * Add class name to specified element node (if there are more than one, separated by space) ** El.classList supports add, @param {String} CLS class name */ export function addClass(el, CLS) {if(! el) return; let curClass = el.className; let classes = (cls || '').split(' '); for(let i = 0, j = classes.length; i < j; i++) { let className = classes[i]; if(! className) return; if(el.classList) { el.classList.add(className); } else if(! hasClass(el, className)) { curClass += ' ' + className; } } if(! el.classList) { el.className = curClass; }}Copy the code

Removes the specified class from the specified node (multiple classes can be added)

** @param {Node} el element Node * @param {String} CLS class name (single or multiple, multiple separated by Spaces) */ export function removeClass(el, cls) { if(! el || ! cls) return; let classes = cls.split(' '); let curClass = ' ' + el.className + ' '; For (let I = 0, j = classes.length; let I = 0, j = classes.length; i < j; i++) { let clsName = classes[i]; if(! clsName) continue; If (el.classList) {// If the browser is compatible with classList el.classlist. remove(clsName); } else if(hasClass(el, clsName)) {curClass = curclass.replace (" + clsName + ", "); } } if(! El.classlist) {// If the browser is not compatible with classList el.className = trim(curClass); }}Copy the code

1.5.3 javascript Element. GetBoundingClientRect ()

Method returns the size of the element and its position relative to the viewport. The return value is a DOMRect object that is a collection of rectangles returned by the element’s getClientRects() method, that is, the collection of CSS borders associated with the element. Top: distance from the top of the element to the top of the page left: distance from the right of the element to the left of the page Right: distance from the right of the element to the left of the page Bottom: distance from the bottom of the element to the top of the page width: width of the element height: height of the element

Reference: www.jb51.net/article/165…