Listen for Right Mouse Click

Used to add right mouse click event listeners to components.

Installation

To install all directives, refer to Directives Installation.

Import and Registration

<script>
import { HvRightClickDirective } from 'havue'
// or
import { HvRightClickDirective } from '@havue/directives'
</script>

Registration:

• Full havue: Using app.use(havue) auto-registers the directive; use v-right-click directly.
• @havue/directives only: Register manually: app.directive('right-click', HvRightClickDirective).

Directive Arguments

Argument	Description
up	Fired when right mouse button is released
down	Fired when right mouse button is pressed
contextmenu	Fired when the browser context menu event fires

Modifiers

Modifier	Description
.stop	Calls event.stopPropagation()
.prevent	Calls event.preventDefault() (e.g. prevent context menu)
.capture	Add listener in capture phase

Binding Value

Expected type: Function, callback receives (e?: MouseEvent).

Examples

<!-- Right button release event -->
<button v-right-click:up="doThis"></button>

<!-- Right button press event -->
<button v-right-click:down="doThis"></button>

<!-- Context menu event -->
<button v-right-click:contextmenu="doThis"></button>

<!-- Prevent context menu -->
<button v-right-click:contextmenu.prevent></button>

<!-- Listen for right button press and prevent default behavior -->
<button v-right-click:down.prevent="doThis"></button>

<!-- Listen for right button press and stop event propagation -->
<button v-right-click:down.stop="doThis"></button>

阻止右键菜单(Prevents right-clicking contextmenu)

Click to view code

// #region code
<template>
  <div class="box" v-right-click:contextmenu.prevent>阻止右键菜单(Prevents right-clicking contextmenu)</div>
</template>

<script setup lang="ts">
import { HvRightClickDirective as vRightClick } from '@havue/directives'
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 100px;
  color: black;
  text-align: center;
  background-color: aquamarine;
}
</style>
// #endregion code