Vue 2.x 移动端长按事件实现方式

vue 移动端长按事件实现的几种方法的总结

大家好啊,我是你们的攻城狮,我是 Ken,人贱贱爱的前端攻城狮,我要告诉你个严重的问题,这几天心情低落,代码撸不动啊,结果今天一到公司,打开禅道,大家可能不知道什么是 禅道 就是专门给程序猿提各种 bug 的地方,一早来了三个 bug,顿时一万个草泥马从脑门飘过:

Vue 2.x 移动端长按事件实现方式_第1张图片

最后我还是怂了,我们来看看到底是什么 bug?一看挖槽,原来是兼容性问题,你知道吗?做前端最害怕的是什么呢?就是尼玛的兼容,尤其是有一个顽固的浏览器,IE,这个千刀万剐的家伙,祸害了多少代的程序猿,哈哈,幸好的是我们只需要兼容移动端,pc 端的网站需要兼容 ipad 端。

接下来看看是什么问题?原来是在 pc 端右键菜单不能出现了,我一看原来是没有兼容移动端的事件,因为在 pc 端我们只需要使用 @contextmenu 这个事件就可以实现右键菜单的出现了,

当然在此之前我们需要实现一个菜单组件,我们这个菜单可能需要兼容二级菜单,所以需要实现二级菜单:

`
`

这其中有一个逻辑当右键时,右键菜单才会出现,所以需要一个控制右键菜单 menuShow ,当然我们也需要知道菜单名称是什么,就需要一个数组来控制 clickMenus

`
`

在外面的组件我们应该这样使用:

` :clickMenus="clickMenus"
 :menu-show="showMenu"
 @clickOuterEvent="clickEvent"
 ref="menu"


export default {
    data() {
        return {
            clickMenus: [
            {
              fnName: 'modifyGroup',
              text: '编辑',
            },
            {
              fnName: 'combineGroup',
              text: this.ufd.text['text.plan.combine.group'],
            },
            {
              fnName: 'delete',
              text: this.ufd.text['text.del'],
            },
          ],
          showMenu: false, // 展示菜单标志
        }
    },
    methods: {
        clickEvent(name){}
    }
}
`

接下来我们需要了解下移动端事件,因为移动端不像 pc 端一样有鼠标事件,移动端只有触摸事件:

今天我们处理 bug 的使用最简单的一种方式,就是使用 @touchstart@touchend

`// 实现移动端长按出现右键菜单
start(e, group, nodeIndex, dayIndex, dayPriceSort, groupIndex) {
    clearTimeout(this.loop) //再次清空定时器,防止重复注册定时器
    let that = this
    this.loop = setTimeout(() => {
        that.ipadMenucontext(e, group, nodeIndex, dayIndex, dayPriceSort, groupIndex)
    }, 1000)
},
end(e) {
    e.preventDefault()
    clearTimeout(this.loop) //清空定时器,防止重复注册定时器
},
`

我们可以看到使用通过延迟函数里执行我们右键时需要处理的动作,在我们手指开始触摸时,需要先使用 clearTimeout 先清除上一次的定时器,再去执行我们想要执行的动作,再触摸结束之后,我们需要清除定时器

所以这样处理完成之后,我们可以在 ipad 端看到当我们手指长按 iPad 屏幕的时候,右键菜单就会出现了。

以上就是移动端长按实现右键菜单。

接下来就是总结

总结

在vue中长按事件并没有封装,在使用的时候需要我们自己取写一个方法获取长按事件。

方法一:使用@touchstart,@touchen

`start () {
    clearTimeout(this.loop); //再次清空定时器,防止重复注册定时器
    this.loop = setTimeout(() => {
        console.log("长按了");
    }, 1000);
},
 end () {
     clearTimeout(this.loop); //清空定时器,防止重复注册定时器
 },
`

备注

备注:使用的时候注意如果是图片,建议把图片设置为背景,直接使用图片,在长按时会触发浏览器对图片的保存、分享等。

方法二:

指令

``export default {
  install(Vue, options = {
    time: 2000,
  }) {
    Vue.directive('longpress', {
      bind: function(el, binding, vNode) {
        if (typeof binding.value !== 'function') {
          const compName = vNode.context.name
          let warn = [longpress:] provided expression '${binding.expression}' is not afunction, but has to be 
          if (compName) { warn += Found in component '${compName}'  }
          console.warn(warn)
        }
        // 定义变量
        let pressTimer = null
        // 定义函数处理程序
        // 创建计时器( 1秒后执行函数 )
        let start = (e) => {
          if (e.type === 'click' && e.button !== 0) {
            return
          }
          if (pressTimer === null) {
            pressTimer = setTimeout(() => {
              // 执行函数
              handler()
            }, options.time)
          }
        }
        // 取消计时器
        let cancel = (e) => {
          // 检查计时器是否有值
          if (pressTimer !== null) {
            clearTimeout(pressTimer)
            pressTimer = null
          }
        }
        // 运行函数
        const handler = (e) => {
          // 执行传递给指令的方法
          binding.value(e)
        }
        // 添加事件监听器
        el.addEventListener('mousedown', start)
        el.addEventListener('touchstart', start)
        // 取消计时器
        el.addEventListener('click', cancel)
        el.addEventListener('mouseout', cancel)
        el.addEventListener('touchend', cancel)
        el.addEventListener('touchcancel', cancel)
      },
    })
  },
}
``

你可能感兴趣的