vconsole

Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现

最近发现了一个鹅厂的仓库，实现起来比我这个方便[捂脸]。

一、vue-cli脚手架中搭建的项目引入vConsole调试

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的绿色小按钮了。

此部分基本参考.html

二、控制vconsole按钮显隐

1.为什么要有这种需求？

防止线上发布时忘记去掉vconsole功能，导致与设计需求不同，或者被用户误操作。加上后算是前端开发人员方便测试的一个工具（尤其是上传发包权利不在你手上的时候），也不用去跟产品解释为什么出来的项目多了个按钮。

2.怎么操作这个按钮？

按钮Dom有自己的ID“__vconsole”。

首先，css里设置

#__vconsole {display: none;
}

然后在app.vue中添加一个tigger控制

比如

 <div><router-view></router-view><div class="vc-tigger" @click="toggleVc"></div></div>

vc-tigger自己设置合适的宽高位置。尽量不影响其他dom为主要要求。

现在要做的是设置连击十次控制显示隐藏，控制显隐使用toggleClass。引入jq没必要，网上找个原生的写法就行，我参考的写法是

app.vue最后内容

 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;}}}}

vconsole

Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现

最近发现了一个鹅厂的仓库，实现起来比我这个方便[捂脸]。

一、vue-cli脚手架中搭建的项目引入vConsole调试

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的绿色小按钮了。

此部分基本参考.html

二、控制vconsole按钮显隐

1.为什么要有这种需求？

防止线上发布时忘记去掉vconsole功能，导致与设计需求不同，或者被用户误操作。加上后算是前端开发人员方便测试的一个工具（尤其是上传发包权利不在你手上的时候），也不用去跟产品解释为什么出来的项目多了个按钮。

2.怎么操作这个按钮？

按钮Dom有自己的ID“__vconsole”。

首先，css里设置

#__vconsole {display: none;
}

然后在app.vue中添加一个tigger控制

比如

 <div><router-view></router-view><div class="vc-tigger" @click="toggleVc"></div></div>

vc-tigger自己设置合适的宽高位置。尽量不影响其他dom为主要要求。

现在要做的是设置连击十次控制显示隐藏，控制显隐使用toggleClass。引入jq没必要，网上找个原生的写法就行，我参考的写法是

app.vue最后内容

 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;}}}}