PC 和移动端实现长按效果

  最近公司有个项目甲方想要个点赞的效果，有长按事件的身影，记录一下。

¶1、实现效果

¶2、HTML

<div
  class="thumb-up-icon"
  oncontextmenu='self.event.returnValue=false'
  @touchstart="addStart"
  @touchend="addStop"
  @touchmove="addStop"
  @mousedown="addStart"
  @mouseup="addStop"
  @mouseout="addStop"
  @click="thumbUp">
</div>

注意

• oncontextmenu='self.event.returnValue=false'禁用右键点击
• touch是移动端的方法
• mouse是 PC 端的方法

¶3、Script

<script>
  import ThumbsUpAni from '../portal/canvas'

  export default {
    name: 'ThumbUp',
    data() {
      return {
        thumbsUpAni: null,
        timer: null
      }
    },
    methods: {
      // 添加 icon
      thumbUp () {
        this.thumbsUpAni.start()
      },
      // 持续添加 icon
      addStart () {
        this.timer && this.addStop()
        this.timer = setInterval(() => {
          this.thumbUp()
        }, 80)
      },
      // 停止添加 icon
      addStop () {
        clearInterval(this.timer)
      }
    },
    mounted () {
      this.thumbsUpAni = new ThumbsUpAni()
    }
  }
</script>

¶4、附件

1、点赞的 canvas 文件：canvas.js
2、点赞的组件代码：ThumbUp.vue
3、点赞图标：thumb-up.png