Global loading has no effect in vue

wrote a global loading

let Loading = {}
// installflag
Loading.installed = false
Loading.install = function (Vue) {
    if (Loading.installed) return
    Vue.prototype.$loading = {}
    Vue.prototype.$loading.show = () => {
        // loading
        if (document.querySelector("-sharpvip-loading")) return
        // 1loading
        let LoadingTip = Vue.extend({
            template: `<div id="vip-loading">
                            <div class="loading"></div>
                       </div>`
        })
        // 2
        let tpl = new LoadingTip().$mount().$el
        // 3body
        document.body.appendChild(tpl)
        Loading.installed = true
    }
    Vue.prototype.$loading.hide = () => {
        let tpl = document.querySelector("-sharpvip-loading")
        document.body.removeChild(tpl)
    }
}
export default Loading


Vue.use(loading);

:
 this.$loading.show();


Aug.23,2021

let tpl = new LoadingTip().$mount().$el
// 
// $mount(el)
Vue.extend({
    template: `<div id="vip-loading">
            <div class="loading"></div>
       </div>`,
       el
});

try the first time is effective
clipboard.png

then call show because installed is true , and installed should control whether the plug-in is registered, but it is actually registered only once in main.js . This variable is redundant

.

you don't need to insert and delete div , install every time you insert dom, and control display .

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e52541-66b45.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e52541-66b45.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?