方案出现的原因：线上bug多种多样，为解决线上bug而产生的想法
下载
yarn add vConsole, vConsole参考 ·https://github.com/Tencent/vConsole·
1.首先npm安装，大家都懂的。
npm install vconsole
2.在main.js中引入刚刚新建的vconsole.js
//main.js
import VConsole from 'vconsole'
Vue.prototype.$vconsole = new VConsole()
3. App.vue里
// 全局样式
<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, ' ')
}
},
