标签：tps one console details 内容 size created 功能 style
1.首先npm安装，大家都懂的。
npm install vconsole
2.在合适的地方新建一个文件vconsole.js，内容如下：
import Vconsole from ‘vconsole‘ let vConsole = new Vconsole() export default vConsole
3.在main.js中引入刚刚新建的vconsole.js
//main.js …… const VConsole = require(‘/pathto/vconsole‘); ……
这个时候基本就能看见界面上出现了vcosole的绿色小按钮了。
此部分基本参考http://www.mamicode.com/info-detail-2231944.html
防止线上发布时忘记去掉vconsole功能，导致与设计需求不同，或者被用户误操作。加上后算是前端开发人员方便测试的一个工具（尤其是上传发包权利不在你手上的时候），也不用去跟产品解释为什么出来的项目多了个按钮。
按钮Dom有自己的ID“__vconsole”。
首先，css里设置
#__vconsole { display: none; }
然后在app.vue中添加一个tigger控制
比如
<div> <router-view></router-view> <div class="vc-tigger" @click="toggleVc"></div> </div>
export default { name: ‘app‘, data(){ return { lastClickTime: 0, count:0 } }, created(){ }, 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, ‘ ‘); } }, toggleVc(){ 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; } } } }
Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
标签：tps one console details 内容 size created 功能 style
原文地址：https://www.cnblogs.com/liyinSakura/p/9883777.html
