vconsole组件的封装

新建组件vconsole.vue

<!--
 * @Author: sly
 * @LastEditTime: 2019年11月26日10:01:32
 * @Description: Vconsole调试工具开启
 -->
<template>
  <div class="Vconsole">
    <!-- Vconsole移动端调试工具显示/隐藏 -->
    <button @click="show_vconsole">点点点</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastClickTime: 0,
      count: 0 //点击次数
    };
  },
  methods: {
    //控制显示vconsole
    show_vconsole() {
      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");
        vconDom.classList.toggle("show");
        this.count = 0;
      }
    }
  }
};
</script>

<style scoped lang="less">
button {
  display: block;
  width: 44px;
  height: 44px;
  background: rgb(255, 5, 5);
  border-radius: 4px;
}
</style>

common.css

#__vconsole {
  display: none;
}
.show {
  display: block !important;
}
.hide {
  display: none !important;
}

main.js

npm i vconsole
// vconsole
import Vconsole from "vconsole";
const vConsole = new Vconsole();
Vue.use(vConsole);
import vconsole from "./components/vconsole";
Vue.component("vConsole", vconsole);

引入

<vConsole></vConsole>