vue中 对vconsole进行 -点击多次- 隐藏展示控制--vconsole配置

1.首先npm安装，大家都懂的。

npm install vconsole


2.在main.js中引入刚刚新建的vconsole.js
//main.js
import VConsole from 'vconsole'
 Vue.prototype.$vconsole = new VConsole()

全局样式
<style lang="scss" >
  div#__vconsole {
    display: none;
    &.show{
     display: block;
    }
  }
</style>


 <b class="vc-tigger" @click="toggleVc">快捷功能</b>

data(){
   return {
	count：0，
	lastClickTime: null
   }
}



    toggleVc () {
      if (process.env.NODE_ENV === 'pre') {
        const nowTime = new Date().getTime()
        if (nowTime - this.lastClickTime < 3000) {
          this.count++
        } else {
          this.count = 0
        }
        this.lastClickTime = nowTime
        if (this.count >= 2) {
          const vconDom = document.getElementById('__vconsole')
          this.toggleClass(vconDom, 'show')
          this.count = 0
        }
      }
    },
    toggleClass (obj, cls) {
      if (this.hasClass(obj, cls)) {
        this.removeClass(obj, cls)
      } else {
        this.addClass(obj, cls)
      }
    },
    hasClass (obj, cls) {
      return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
    },
    addClass (obj, cls) {
      debugger
      if (!this.hasClass(obj, cls)) obj.className += ' ' + cls
    },
    removeClass (obj, cls) {
      if (this.hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
        obj.className = obj.className.replace(reg, ' ')
      }
    },