vue中使用自定义指令(directive)解决h5在ios的微信浏览器问题以及长按进行dom操作

问题1： h5在ios的微信浏览器中，唤起键盘后，设置定位的元素会被顶起，并且在键盘消失后不会回到原来的位置

第一步：创建vue自定义指令

import Vue from 'vue'
const windowHeight = window.innerHeight
// 弹起输入框，固定页面定位（ios问题）
Vue.directive('fixedInput', function (el, binding) {
  el.addEventListener('blur', function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    let currentPosition;
    let speed = 1; //页面滚动距离
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
  })
})

第二步：在dom上用v-fixedInput指令

<input v-fixedInput></input>

问题二：h5中，历史数据列表中有个需求：长按当前记录 删除，原生写起来比较复杂。

第一步：创建vue自定义指令

import Vue from 'vue'
Vue.directive('longpress', function (el, binding) {
    var timer = null;
    var start = function (e) {
        // 如果是点击事件，不启动计时器，直接返回
        if (e.type === 'click') {
            return
        }
        if (timer == null) {

            // 创建定时器 ( 2s之后执行长按功能函数 )
            timer = setTimeout(function () {
                //执行长按功能函数
                binding.value.handleLongClick(binding.value.item)
            }, 1000)
        }
    }
    var cancel = function () {
        if (timer !== null) {
            clearTimeout(timer)
            timer = 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);
})

第二步：在需要长按的dom上使用v-longpress

<div  v-longpress></div>