Vue-cli中使用vConsole,以及設定JS連續點選控制vConsole按鈕顯隱功能實現
阿新 • • 發佈:2018-10-31
一、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; } } } }