移动端h5项目实现长按触发vconsole

1,231 阅读1分钟

一、下载vconsole

在终端运行指令,下载相关依赖。

npm install vconsole 或 npm i vconsole

二、引入vconsole.min.js

在项目的 index.html 文件中引入 vconsole.min.js
方式一:

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

(还有一种方式引用 vconsole.min.js 文件,后续在更新)
注:个人感觉有方式一的引入,可以不进行 npm 下载,未验证...

三、初始化vconsole

在项目的 index.html 文件中,初始化 vconsole
初始化时需判断是否已存在 vConsole,避免重复 new

<script>
  // 初始化
  if (window.vConsole == undefined) {
     console.log('Hello world');
     window.vConsole = new VConsole();
   }
</script>

四、添加初始化vconsole样式

App.vue 中,约定项目启动时,vconsole 默认是隐藏的。

 #__vconsole {
    display: none;
  }

五、添加长按事件

App.vue

  • 绑定方法
<div id="app" @touchstart="showDeleteButton" @touchend="emptyTime">
</div>
  • 定义定时器变量:
Loop:null // 定时器
  • 实现方法
// 长按事件,这里设置长按5s
showDeleteButton:function () {
    const vconsole = document.querySelector('#__vconsole');
    clearTimeout(this.Loop); //再次清空定时器,防止重复注册定时器
    this.Loop = setTimeout(function() {
        vconsole.style.display = 'block'
    }.bind(this), 5000);
},
// 清空定时器
emptyTime:function () {
    clearTimeout(this.Loop); // 防止重复注册定时器
}

可以实现了^_^... 期待更多小功能的实现技巧,不足之处,敬请指导!