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

最近发现了一个鹅厂的仓库，实现起来比我这个方便[捂脸]。https://github.com/AlloyTeam/AlloyLever

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

此部分基本参考http://www.mamicode.com/info-detail-2231944.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没必要，网上找个原生的写法就行，我参考的写法是https://blog.csdn.net/songchunmin_/article/details/55209644

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;

            }
          }
      }

    }