v-longpress

The v-longpress directive is used to handle mouse long press events.

Examples

<template>
<article>
  <button
    v-longpress.repeat="{ handler: handleLongpress, repeatInterval: 500 }"
    class="box"
  >
    Longpress me
  </button>
</article>
</template>

<script>
import Vue from 'vue'
import { longpress, $toast } from 'veui'

Vue.use($toast)

export default {
  directives: {
    longpress
  },
  methods: {
    handleLongpress () {
      this.$toast.info('Longpress triggered!')
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

.box {
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbdbdb;
  background: #fff;
  outline: none;
  transition: background-color 0.3s;
  line-height: 1;

  &:active {
    background-color: #e7e7e7;
  }
}
</style>

API

Please refer to the official document for the specific usage of the directive. For more detailed parameters, please refer to Custom Directive.

Options

Type: function | Object.

When using the function type, the options represents the callback function that triggers long press or subsequent repeated triggering. For example:

<button v-longpress="handleLongPress">+</button>

When using the Object type, the options can fully configure all parameters. For example:

<button v-longpress="{
  timeout: 500,
  handler: handleLongPress,
  repeat: true,
  repeatInterval: 100
}">+</button>

Name	Type	Default	Description
`timeout`	`number`	`longpress.timeout`	The number of milliseconds to wait for long press. Can be configured globally.
`handler`	`function`	`function() {}`	The callback function triggered by long press and subsequent repeated triggering.
`repeat`	`boolean`	`false`	Whether to repeatedly trigger the callback function when holding down, similar to the effect of continuous automatic input after pressing a keyboard key.
`repeatInterval`	`number`	`longpress.repeatInterval`	The number of milliseconds between repeated triggering of the callback function. Can be configured globally.

The parameters provided by the Object type will overwrite the parameters specified by the directive arguments and modifiers.

Modifiers

Corresponding to repeat in the Object type options. For example:

<button v-longpress.repeat="increase">+</button>

Configs

Key	Type	Default	Description
`longpress.timeout`	`number`	`500`	The number of milliseconds to wait for long press.
`longpress.repeatInterval`	`number`	`100`	The number of milliseconds between repeated triggering of the callback function.

Edit this page on GitHubEdit