v-longpress

v-longpress 指令用于处理鼠标长按事件。

示例

<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

指令的具体用法请参考官方文档。更多详细参数请参考自定义指令。

绑定值

类型：function | Object。

使用 function 类型则绑定值表示触发长按或后续重复触发的回调函数。例如：

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

使用 Object 类型时绑定值可完整配置所有参数。例如：

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

参数	类型	默认值	描述
`timeout`	`number`	`longpress.timeout`	触发长按等待的毫秒数。可进行全局配置。
`handler`	`function`	`function() {}`	触发长按及后续重复触发时的回调函数。
`repeat`	`boolean`	`false`	保持长按时是否重复触发回调，类似按下键盘按键后连续自动输入的效果。
`repeatInterval`	`number`	`longpress.repeatInterval`	重复触发回调间隔的毫秒数。可进行全局配置。

Object 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。

修饰符

对应 Object 类型绑定值中的 repeat。例如：

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

全局配置

配置项	类型	默认值	描述
`longpress.timeout`	`number`	`500`	触发长按等待的毫秒数。
`longpress.repeatInterval`	`number`	`100`	重复触发回调间隔的毫秒数。

在 GitHub 上编辑此页面编辑