一、说明
在项目开发时，可以安装vconsole来帮助我们排查和解决问题，但是在其他环境（如UAT）时，我们不能让vconsole控制台一直显示,于是想到用暗门的方式,通过特定的方式来触发控制台的显示和隐藏。
二、实现方式
1. 安装vconsole
npm i vconsole
2. 在main.js中引用vconsole
import VConsole from 'vconsole'
const vConsole = new VConsole()
Vue.use(vConsole)
3. 添加全局样式
在项目的App.vue中添加全局样式让vconsole的控制台默认隐藏
这里的"#__vconsole" 是vconsole中内置的id，直接使用即可
<style lang=scss>
/* vconsole默认隐藏 */
#__vconsole {
display: none;
&.show {
display: block;
}
}
</style>
4. 控制显示与隐藏的方法
可以在项目util下面新建一个vconsole目录来存放用于控制显隐的方法
- util/vconsole/index.js
const __vconsole = '__vconsole'
const showClass = 'show'
// 判断元素ele是否包含类名cls
const hasClass = (ele, cls) => {
// 使用正则表达式匹配ele的className属性中是否包含cls类名
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
// 添加类名
const addClass = (ele, cls) => {
// 如果元素没有该类名，则添加类名
if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
// 定义一个函数，用于移除元素上的指定类名
const removeClass = (ele, cls) => {
// 判断元素上是否包含指定的类名
if (hasClass(ele, cls)) {
// 定义一个正则表达式，用于匹配指定的类名
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
// 使用正则表达式将指定的类名替换为空格
ele.className = ele.className.replace(reg, ' ')
}
}
// 定义一个toggleClass函数，用于切换元素的class
const toggleClass = (ele, cls) => {
// 判断元素是否具有指定的class
if (hasClass(ele, cls)) {
// 如果元素具有指定的class，则移除该class
removeClass(ele, cls)
// 从sessionStorage中移除__vconsole
sessionStorage.removeItem(__vconsole)
} else {
// 如果元素不具有指定的class，则添加该class
addClass(ele, cls)
// 将showClass存储到sessionStorage中，键名为__vconsole
sessionStorage.setItem(__vconsole, showClass)
}
}
// 计数器
let clickCount = 0
let lastClickTime = null
// 定义一个函数delayed，用于延迟执行
const delayed = (ms = 100) => new Promise((resolve) => setTimeout(resolve, ms))
// vconsole已处于显示状态则页面切换时保持显示
export const maintainShowVconsole = async () => {
// 判断sessionStorage中是否存在__vconsole
if (sessionStorage.getItem(__vconsole)) {
// 延迟执行
await delayed()
// 获取vconsole元素
const vconsoleEle = document.getElementById(__vconsole)
// 添加showClass类名，显示vconsole
addClass(vconsoleEle, showClass)
}
}
// 切换vconsole显示或隐藏
// 导出一个函数toggleShowVconsole，用于切换控制台显示状态
export const toggleShowVconsole = () => {
// 获取当前时间戳
let currentTime = new Date().getTime()
// 如果上一次点击时间存在，且当前时间与上一次点击时间之差小于等于3000毫秒，则点击次数加1
if (lastClickTime && currentTime - lastClickTime <= 3000) {
clickCount++
// 否则，点击次数重置为1
} else {
clickCount = 1
}
// 更新上一次点击时间为当前时间
lastClickTime = currentTime
// 如果点击次数等于10，则输出提示信息，并切换控制台显示状态
if (clickCount === 11) {
console.log('按钮连续点击了11次！')
const vconsoleEle = document.getElementById(__vconsole)
toggleClass(vconsoleEle, showClass)
}
}
5. 将控制方法挂载到全局
挂载到全局的原因：toggleShowVconsole和maintainShowVconsole是用于控制 vConsole 显示和隐藏的工具方法。这些方法需要在多个页面或组件中使用，为了避免重复导入和传递，需要将它们挂载到全局。
// 引入 vconsole 暗门函数并挂载到全局
import { toggleShowVconsole, maintainShowVconsole } from '@/util/vconsole'
// 切换显示vconsole
app.config.globalProperties.$toggleShowVconsole = toggleShowVconsole
// 维持显示vconsole
app.config.globalProperties.$maintainShowVconsole = maintainShowVconsole
6.在特定页面中使用
可以写一个按钮放置在特定位置，并给其设置透明样式，绑定点击事件触发刚刚挂载的toggleVconsole方法
<template>
<!-- 添加一个按钮用于切换 vConsole 显示状态 -->
<view class="vconsole-toggle-button" @click="toggleVconsole">
切换 vConsole
</view>
</template>
<script setup>
import { getCurrentInstance, onMounted } from 'vue'
// 获取当前组件实例
const instance = getCurrentInstance()
// 页面加载时保持 vConsole 显示状态
onMounted(() => {
instance.appContext.config.globalProperties.$maintainShowVconsole()
})
// 切换 vConsole 显示状态
const toggleVconsole = () => {
instance.appContext.config.globalProperties.$toggleShowVconsole()
}
</script>
