关于javascript:Vue-2x-移动端长按事件实现方式

2次阅读

共计 5197 个字符，预计需要花费 13 分钟才能阅读完成。

大家好啊，我是你们的攻城狮，我是 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”>
      {{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”>
          {{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，@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)
      },
    })
  },
}
“