移动端调制工具Vconsole,动态控制显示/隐藏

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>  var vConsole = new VConsole();  </script>
//默认隐藏
#__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;
        }
    },
}