vue中使用vconsole(移动端调试)

安装使用

安装

npm install vconsole

创建vConsole.js文件

import Vconsole from 'vconsole'
const vConsole = new Vconsole()
export default vConsole

在main.js引入

import vConsole from '@/assets/js/vconsole.js'
Vue.prototype.vConsole = vConsole;

隐藏显示

全局样式

//默认隐藏
#__vconsole {
  display: none;
}
//类名切换显示/隐藏
.show {
  display: block!important;
}

按钮触发

//预留一个空按钮用来控制显示/隐藏
<button @click="show_vconsole" class="vc-tigger"></button>

配置参数

data() {
    return {
        lastClickTime: 0,
        count: 0
    }
},

配置方法

methods:{
    hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    },
    addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    },
    toggleClass(obj, cls) {
        if (this.hasClass(obj, cls)) {
            this.removeClass(obj, cls);
        } else {
            this.addClass(obj, cls);
        }
    },
    removeClass(obj, cls) {
        if (this.hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    },
    //控制显示vconsole
    show_vconsole() {
        const nowTime = new Date().getTime();
        if (nowTime - this.lastClickTime < 3000) {
            this.count++;
        } else {
            this.count = 0;
        }
        this.lastClickTime = nowTime;
        if (this.count >= 10) {
            let vconDom = document.getElementById('__vconsole');
            this.toggleClass(vconDom, 'show')
            this.count = 0;
        }
    },
}