动态加载 vConsole

动态加载vConsole

// 动态加载 vConsole
(function loadVConsole() {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/vconsole@latest/dist/vconsole.min.js';
    //script.src = 'file://../vconsole.js';
    script.onload = function() {
        // vConsole 加载完成后初始化
        initVConsole();
    };
    document.head.appendChild(script);
})();
// 初始化 vConsole
function initVConsole() {
    // VConsole 默认会挂载到 `window.VConsole` 上
    if (window.VConsole) {
        var vConsole = new window.VConsole();
        // 动态添加关闭按钮
        whenElementExist(()=>{
            var btns = document.querySelectorAll(".vc-toolbar .vc-tool.vc-tool-default.vc-toggle");
            if(btns.length){
                var closeBtn=Array.from(btns).filter(n=>n.textContent==='Bottom')[0];
                if(closeBtn){
                    closeBtn.textContent='Close';
                    closeBtn.onclick=()=>{vConsole.destroy()}
                }
            }
            return btns.length;
        });
    }
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            let element = null;
            if (typeof selector === 'function') {
                element = selector();
            } else {
                element = document.querySelector(selector);
            }
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}
image.png

留下你的脚步
推荐阅读