专栏首页人生代码Vue 2.x 移动端长按事件实现方式

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

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

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

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

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

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

<template>
  <!-- 右键菜单 -->
  <ul class="menu" v-show="show">
    <li
      :key="index"
      @click="clickOuterEvent(clickMenu.fnName, clickMenus.text)"
      class="menu-item icon-right-arrow"
      v-for="(clickMenu,index) in clickMenus"
    >
      <i class="menu-item-bg"></i>
      {{clickMenu.text}}
      <span class="right-arrow" v-show="clickMenu.secondaryMenu"></span>
      <ul class="secondary-menu">
        <li
          :key="index"
          @click.stop="clickEvent(item.fnName, item.text)"
          class="menu-item"
          v-for="(item,index) in clickMenu.secondaryMenu"
        >
          <i class="menu-item-bg"></i>
          {{item.text}}
        </li>
      </ul>
    </li>
  </ul>
</template>

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

<script>
export default {
  name: 'fyMenu',
  props: {
    menuShow: {
      type: Boolean,
      default: false,
    },
    clickMenus: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 鼠标右键菜单
    contextmenu: {
      type: Object,
      default: function _default() {
        return { height: 0, width: -10 }
      },
    },
  },
  data() {
    return {
      show: this.menuShow,
    }
  },
  methods: {
    clickOuterEvent(name, text) {
      this.$emit('update:menu-show', false)
      this.$emit('clickOuterEvent', name, text)
    },
    clickEvent(name, text) {
      this.$emit('update:menu-show', false)
      this.$emit('clickEvent', name, text)
    },
    getShow() {
      this.show = false
    },
    documentListen() {
      document.addEventListener('click', this.getShow, false)
    }
  },
  watch: {
    menuShow(val) {
      this.show = val
    },
  },
  mounted() {
    this.documentListen()
  },
  beforeDestroy() {
    document.removeEventListener('click', this.getShow, false)
  }
}
</script>

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

<fy-menu
 :clickMenus="clickMenus"
 :menu-show="showMenu"
 @clickOuterEvent="clickEvent"
 ref="menu"
></fy-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,@touchend

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)

      },

    })

  },

}

本文分享自微信公众号 - 志学Python(lijinwen1996329ken),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Vue 3构建更好的高阶组件

    高阶组件(HOC)是使用模板声明性地向您的应用程序添加某些功能的组件。我相信即使引入了Composition API,它们仍将保持非常重要的关联。

    公众号---人生代码
  • Vue 3 refs 学习

    接受一个值,返回一个响应式并且可变的 ref 对象。ref 对象具有指向值的单个属性的值。

    公众号---人生代码
  • 爬虫(104)教你词云分析拉勾网数百个职位招聘详

    昨天我们分析了某 girl 的 QQ 空间,之后想想还是不过瘾啊,感觉还可以深度挖掘词云这个库,于是在网上找了一个实际例子又来波

    公众号---人生代码
  • Oracle实操

    结构化查询语言(Structured Query Language)(发音ˈes kjuːˈ) SQL是最重要的关系数据库操作语言,是所有关系数据库管理系统的...

    葆宁
  • python 调用Google Tran

    py3study
  • Java计算数组平均值--最后放大招

    首先创建一个带有值的数组,在for循环查找数组中的所有元素的总和,然后将总和除以数组的长度即可得到数字的平均值。

    FunTester
  • 卧槽,被SpringBoot整合原生OpenFegin坑惨了(非SpringCloud)!!

    作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,具有精准的定时任务和延迟队列处理功能。自开源半年多以来,已成功为十几家中小型企业提供了...

    冰河
  • 「小程序JAVA实战」小程序的横向视频和页面拦截(59)

    PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

    IT故事会
  • 关于“腾讯课堂向学生收费”等诈骗短信的情况说明

    ? 近日,部分家长、学生反馈收到以腾讯课堂名义发送的诈骗短信,该信息以学生课堂不当言论和违反纪律为由,要求支付罚款或反馈个人信息。 腾讯课堂特此声明:疫情期...

    鹅老师
  • “高危”!腾讯发现云虚拟化平台逃逸漏洞

    随着云技术的快速发展和迭代更新,各行各业都在“云”中快速成长,安全性显得尤为重要。而云时代软硬件的“云交互”,对安全来说也意味着新的挑战。 近日,腾讯Blad...

    云鼎实验室

扫码关注云+社区

领取腾讯云代金券