修改长按显示筛选名称

src/views/eva/searchstuDetail.vue

@@ -44,6 +44,7 @@
           :key="index"
           @touchstart="touchStart(index)"
           @touchend="touchend(index)"
+          @touchmove="gtouchmove()"
         >
           <div class="txt">{{ i.name }}</div>
           <div ref="loop" class="loopList">
@@ -155,13 +156,14 @@ export default {
       termList: [],
       termData: [],
 
-      TermRecord: []
+      TermRecord: [],
+      timeOutEvent: 0
     }
   },
   methods: {
     touchStart(e) {
-      // console.log(this.$refs.loop[e])
-      setTimeout(() => {
+      this.timeOutEvent = setTimeout(() => {
+        this.timeOutEvent = 0
         const target = this.$refs.loop[e]
         target.style.display = 'block'
         if (e % 4 !== 0) {
@@ -169,12 +171,26 @@ export default {
           target.style.right = '0'
         }
       }, 500)
+      return false
+    },
+    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
+    gtouchmove() {
+      clearTimeout(this.timeOutEvent) // 清除定时器
+      this.timeOutEvent = 0
+      // alert('取消了')
     },
     touchend(e) {
-      setTimeout(() => {
-        const target = this.$refs.loop[e]
-        target.style.display = 'none'
-      }, 1000)
+      // 清除定时器
+      clearTimeout(this.timeOutEvent)
+      if (this.timeOutEvent !== 0) {
+        // 这里写要执行的内容（尤如onclick事件）
+        console.log('你这是点击，不是长按')
+      } else {
+        setTimeout(() => {
+          const target = this.$refs.loop[e]
+          target.style.display = 'none'
+        }, 1000)
+      }
     },
     // 获取基础数据
     getData() {
@@ -529,33 +545,22 @@ export default {
   }
   .observe_box {
     width: 100%;
-    // margin: 0 10px;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     text-align: center;
     font-family: Roboto;
-    // border: 1px solid rgba(187, 187, 187, 1);
     box-sizing: border-box;
     padding: 0 10px;
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
-
-    .observe_boxTit {
-      width: 84px;
-      height: 29px;
-      line-height: 29px;
-      color: rgba(51, 51, 51, 1);
-      font-size: 12px;
-      text-align: left;
-      font-family: PingFangSC-regular;
-      margin-bottom: 5px;
-    }
     .observe_boxCon {
       position: relative;
-      width: calc((100% - 60px) / 4);
+      // width: calc(100% / 5);
+      width: calc(100% / 4 - (5px * 3));
+
       height: 30px;
       line-height: 30px;
       border-radius: 4px;
@@ -563,13 +568,11 @@ export default {
       color: rgba(153, 152, 152, 1);
       font-size: 12px;
       text-align: center;
-      // overflow: hidden;
-      // text-overflow: ellipsis;
-      // white-space: nowrap;
       font-family: Roboto;
+      box-sizing: border-box;
       border: 1px solid rgba(231, 231, 231, 1);
       margin-bottom: 8px;
-      margin-right: 5%;
+      margin-right: 20px;
       .txt {
         overflow: hidden;
         text-overflow: ellipsis;

src/views/eva/studentDetail.vue

@@ -55,9 +55,6 @@
         <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
       </div>
       <div class="observe_box">
-        <!-- <div class="observe_boxTit">筛选框</div> -->
-        <!-- <div class="observe_boxSelect"> -->
-        <!-- <div class="observe_boxCon" style="display: inline-block;" @click="addFil('')">全部</div> -->
         <div
           class="observe_boxCon"
           v-for="(i, index) in filtrate"
@@ -66,6 +63,7 @@
           :key="index"
           @touchstart="touchStart(index)"
           @touchend="touchend(index)"
+          @touchmove="gtouchmove()"
         >
           <div class="txt">{{ i.name }}</div>
           <div ref="loop" class="loopList">
@@ -178,12 +176,15 @@ export default {
       termData: [],
 
       // 学期记录条数
-      TermRecord: []
+      TermRecord: [],
+
+      timeOutEvent: 0
     }
   },
   methods: {
     touchStart(e) {
-      setTimeout(() => {
+      this.timeOutEvent = setTimeout(() => {
+        this.timeOutEvent = 0
         const target = this.$refs.loop[e]
         target.style.display = 'block'
         if (e % 4 !== 0) {
@@ -191,12 +192,29 @@ export default {
           target.style.right = '0'
         }
       }, 500)
+      return false
+    },
+    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
+    gtouchmove() {
+      clearTimeout(this.timeOutEvent) // 清除定时器
+      this.timeOutEvent = 0
+      // alert('取消了')
     },
     touchend(e) {
-      setTimeout(() => {
-        const target = this.$refs.loop[e]
-        target.style.display = 'none'
-      }, 1000)
+      // 清除定时器
+      clearTimeout(this.timeOutEvent)
+      if (this.timeOutEvent !== 0) {
+        // 这里写要执行的内容（尤如onclick事件）
+        console.log('你这是点击，不是长按')
+      } else {
+        setTimeout(() => {
+          const target = this.$refs.loop[e]
+          target.style.display = 'none'
+        }, 1000)
+      }
+      // if (condition) {
+
+      // }
     },
     // 获取基础数据
     getData() {
@@ -622,44 +640,34 @@ export default {
   }
   .observe_box {
     width: 100%;
-    // margin: 0 10px;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     text-align: center;
     font-family: Roboto;
-    // border: 1px solid rgba(187, 187, 187, 1);
     box-sizing: border-box;
     padding: 0 10px;
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
-    .observe_boxTit {
-      width: 84px;
-      height: 29px;
-      line-height: 29px;
-      color: rgba(51, 51, 51, 1);
-      font-size: 12px;
-      text-align: left;
-      font-family: PingFangSC-regular;
-      margin-bottom: 5px;
-    }
+
     .observe_boxCon {
       position: relative;
-      width: calc((100% - 60px) / 4);
+      width: calc(100% / 4 - (5px * 3));
+      // width: calc(100% / 5);
       height: 30px;
       line-height: 30px;
       border-radius: 4px;
       background-color: #fff;
       color: rgba(153, 152, 152, 1);
       font-size: 12px;
-
       text-align: center;
       font-family: Roboto;
+      box-sizing: border-box;
       border: 1px solid rgba(231, 231, 231, 1);
       margin-bottom: 8px;
-      margin-right: 5%;
+      margin-right: 20px;
       .txt {
         overflow: hidden;
         text-overflow: ellipsis;