vue h5移动端长按时间_h5 长按

js里面没有长按事件 通过 touchstart 和 touchend 来实现

自定义指令

Vue.directive('longpress', (el, binding) => {
  // if (typeof binding.value !== 'function') {
  //   throw Error(binding.value + '不是函数')
  // }
  // Make sure expression provided is a function
  if (typeof binding.value !== 'function') {
    // Fetch name of component
    const compName = vNode.context.name;
    // pass warning to console
    let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`;
    if (compName) { warn += `Found in component '${compName}' `; }
    console.warn(warn);
  }
  let pressTimer = null;
  // 开始按下
  const start = (e) => {
    // 如果是点击事件，不启动计时器，直接返回
    if (e.type === 'click' && e.button !== '0') {
      return;
    }
    if (pressTimer == null) {
      // 创建定时器 （2s之后执行长按功能韩函数）
      pressTimer = setTimeout(() => {
        binding.value(); // 执行长按功能函数
      }, 1000);
    }
  };
  // 取消按下
  const cancel = (e) => {
    if (pressTimer != null) {
      clearTimeout(pressTimer);
      pressTimer = null;
    }
  };
  // 添加事件监听器
  el.addEventListener('mousedown', start);
  el.addEventListener('touchstart', start);
  // 取消计时器
  el.addEventListener('click', cancel);
  el.addEventListener('mouseout', cancel);
  el.addEventListener('touchend', cancel);
  el.addEventListener('touchcancel', cancel);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

html 使用

 <div id="touchId" v-longpress="touchStar" :class="tipShow == true ? 'tips' : ''" :data-content="tip">长按触发</div
1

js事件

// 长按
touchStar(e) {
  this.tip = '我是长按触发的';
  if (this.tipsTimer != null) return;
  this.tipShow = true;
  this.tipsTimer = setTimeout(() => {
    this.tipShow = false;
    this.tipsTimer = null;
  }, 3000);
},
1
2
3
4
5
6
7
8
9
10

css样式

	[v-cloak] {
      display: none
    }

    #touchId {
      position: relative;
      font-size: 16px;
      //下面代码避免长按 选择文字
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .tips:before {
      content: '';
      position: absolute;
      top: 10px;
      left: 6px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: rgba(0, 0, 0, .7);
    }

    .tips:after {
      content: attr(data-content);
      position: absolute;
      top: 22px;
      left: 0;
      white-space: nowrap;
      background-color: rgba(0, 0, 0, .7);
      color: white;
      padding: 4px 10px;
      border-radius: 3px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38