一、下载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); // 防止重复注册定时器
}
可以实现了^_^... 期待更多小功能的实现技巧,不足之处,敬请指导!