项目日常问题总结

以下是一个示例代码：

<template>
  <div class="container">
    <div class="overlay" @touchstart="handleTouchStart"></div>
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>
</template>

<style>
.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none; /* 禁用触摸事件处理 */
}

.content {
  position: relative;
}
</style>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      // 处理触摸事件
    }
  }
}
</script>

有些时候要使用map去遍历，才能有效果

 解决方案：销毁页面时，记得清除掉所有定时器

时间戳的兼容问题

参考：移动端布局方案 postcss-pxtorem - 简书

vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案

VUE_vue 移动端完美适配方案 amfe-flexible + postcss-pxtorem-蒲公英云

注意：此方案是字体会随屏幕尺寸，相应等比放大。

不使用任务插件，所有尺寸用px，平板大尺寸用媒体查询，另外修改样式

解决方案：在video标签添加上transform: scaleX(-1);

（注意：但电脑上的摄像头倾斜，此办法无效）

解决方案：添加样式兼容

video::--webkit-media-controls-play-button {

  display: none !important;

  -webkit-appearance: none !important;

  appearance:none;

}

成像

这里的事件改变了isSelected的值，但类名并没有添加上去，

解决办法：需要在点击事件里，添加强制刷新

页面结构

解决方法：使用vuex定义定时器和倒计时的值。

当需要在每次刷新页面后，都得再次进入文件阅读才行，就得改成这样

表单已经关闭，但时间弹窗还在

需要把这个key值取item,不取index，就可解决

 在top.vue这个页面跳到mywaitProcess,但如果在mywaitProcess页面，再点击消息，再次跳转，此时页面是不会触发mounted钩子的。

解决方案：使用跳转路由

上面的方法，用户体验不太好，更好的方式，是使用监听路由参数的方式（得用query方式）

在 Vue 2 中， 并不是响应式的，这意味着如果你直接在组件中使用 来监听 ，组件不会在 改变时触发更新。

而对于 参数，Vue Router 提供了 属性，它是响应式的，因此你可以直接在组件中使用 来监听 的变化。

使用clearValidate

需要将初始值设为空，再在数据处理那再赋值，便可解决

点击返回，或者浏览器的返回（手指滑动），勾选了，时间到0了。签字就变蓝。才可以签字

如下所示

首页ExamList

                                                                                                   人脸比对页

比对不通过页ErrorFace

解决方案：如下 

解决方案，需要如下 ，在关闭的时候使用这个方法（这个方法，必须得在前面，不能放在最后），否则没有效果