vue js контекстное меню

Building Context Menu in Vue.js

Today we are going to create our context menu with VueJS from scratch, with traditional «Hello World» example.

Create fresh Vue Project

Let’s start by creating new project and running the application.

The first you have to do is to install the Vue CLI on your computer

To create a new project, run:

More about Vue cli, you can see here from their official docs.

It will generate new Project with following initial file structure:

Start Project

Now lets run our generated project by Vue CLI

The Vue Instance

We will open now App.vue there will be following code:

For now we can remove HelloWorld component and create new component named ContextMenu.vue

Open you ContextMenu.vue and add basic template

A bit about code
Slot will allow us to render components inside of our context menu, and tabIndex prop will focus element

Add Styles

Now add some logic and full component Code

The code is self self explanatory explained open method opens context menu, close method closes the context menu, and computed propert styles that will return position of context menu.

Usage

Now import your new component into App.vue, and start show your own context menu.

With a little edit you could create something looking like this:

This is just a basic and really simple example how you could create context menu with as little code as possible.

As is almost always the case, you’ll need to pick the approach that makes the most sense for your use-case.

Источник

Category: Menu & Navigation

Latest free Vue.js Menu & Navigation components, plugins, and other related libraries for modern mobile & web applications.

Floating Menu Component For Vue App

A Vue.js component to create a draggable, customizable, multi-level, keyboard accessible floating menu on the Vue.js app.

Modern Bottom Navigation Bar In Vue

A Vue component to create a modern animated bottom navigation tab bar for web & mobile.

Simple Context Menu Component For Vue.js

Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.

Multi-level Sidebar Menu Component For Vue.js

An easy to use multi-level sidebar navigation component designed for Vue.js dashboard applications.

Elegant Menu Toolbar & Content Editor For Vue.js – File Toolbar Menu

A Vue.js component to create a customizable, multi-language, easy-to-style, touch-enabled HTML toolbar menu with editor options for HTML content.

Headless Notification Component With Tailwind CSS

A fully customizable headless notification component based on Vue 3 Composition API and Tailwind CSS.

Stripe-like Dropdown Menu For Vue.js – Stripe Menu

Stripe Menu is a Vue.js component to create a minimal clean dropdown nav menu just like you see on the Stripe app.

Stackable Slideout Panels For Vue.js

A Vue JS 2+ component for stackable slideout panels. Preview: Changelog: v2.14.0 (06/24/2021) fix animation timing v2.13.0 (09/08/2020) Update css for animating panel slide out

Custom Context Menu For Vue 3

A lightweight, dynamic, themeable, multi-level, custom context menu component for Vue 3 applications.

Responsive Navigation UI Component For Vue 3

A dynamic, responsive, mobile-first app navigation UI component for Vue.js 3.

Multi-level Dock Menu Component For Vue 3

A customizable multi-level dock menu component as you have seen on popular OS like Windows.

Pretty Mobile-friendly Navbar Component – navigation-bar

A simple, pretty, mobile-friendly navbar component for your Vue projects.

Universal Dropdown Menu Component For Vue

A universal dropdown menu component that can be attached to any element on the app.

Источник

Vue js контекстное меню

Vue Custom Context Menu

A Vue.js plugin for building custom 🖱 Context Menus. Automatically adjusts position and supports nested Context Menus out of the box

Install the NPM package

Import it in your app’s main file the preferred way

to import as an ES6 module

to import as a CommonJS module

Or alternatively you can include it in the page as a separate «>

Define Context Menus using the globally-available component. Bind the defined Context Menus to target elements/components using the v-context-menu directive

Though the component can be located anywhere in the template it’s better to always define Context Menus at the top-most level (just like the «cm-for-base-header» is defined). Notice also that the v-context-menu is a directive, and directives accept an expression rather than a string, so the additional pair of signle quotes is necessary.

You can also wrap a Context Menu in a separate component so that you can reuse it between different targets located in separate s

Note that in such case you’d have to provide the ref=»wrapped-context-menu» to the Context Menu that is wrapped inside a wrapper-component

You can also completely disable all the Context Menus (including the browser’s native one) for a specific element by providing it with v-context-menu=»null»

You can always request the native Context Menu for any element if you hold the Alt key during the right-click

v-context-menu also affects the children of the target it’s bound to. Thus in the following example the Context Menu won’t only be disabled for the

element, but also for all the

It’s still possible however to overwrite the Context Menu for a specific child (and all of its children as well)

and this paragraph

The above pattern can become quite useful if you want to globally disable the native Context Menus for the entire app and at the same time provide custom ones for only certain elements/components.

The items for Context Menus are defined using the component

The action prop specifies the method performed when the item is clicked. The provided function is called with 2 arguments: the target element the Context Menu is opened for and the Context Menu instance itself

You can disable an item by providing it the disabled prop

When a disabled item is clicked, the provided action isn’t fired and the Context Menu doesn’t close.

Nested Context Menus

Now when the cursor enters the item a request to open the «cm-with-downloading-options» Context Menu is registered and the Context Menu will be opened after some time (controller by the delay prop that we’ll discuss a bit later). The nested Context Menu can also be opened immediately if the item is clicked.

Wrapped Context Menus’ items can also open nested Context Menus

Note however that the «cm-with-downloading-options» Context Menu wouldn’t normally be available anywhere outside this wrapper-component. If you need to reuse a nested Context Menu between different root Context Menus, you can always wrap the nested one itself

The action prop is ignored for callers

v-context-menu=»null» when used on the component acts the same as the disabled option

Regular Context Menu items can be wrapped both with HTML elements and components

But bear in mind that the same won’t work if you use callers as slots for other components!

You can control different aspects of a Context Menu with props. There’re 3 props available for a component:

false by default. Accepts Boolean values.

The penetrable option, as its name suggests, allows to define Context Menus with the penetrable overlay. It means that the user will be able to focus input fields, trigger mouseup events, immediately open Context Menus for other targets located underneath the overlay if he clicks (or right-clicks) the overlay of an opened Context Menu.

If a Context Menu is set to be impenetrable and the user clicks/right-clicks the overlay then the Context Menu will just close.

Unfortunately (or not) it’s impossible for any HTML content to be rendered outside the browser window. It means that the custom Context Menus are restricted by the size of the viewport of the page. So when the user right-clicks somewhere near the bottom-right corner of the page it may happen so that the opened Context Menu simply won’t have enough space available. The problem is solved for you out of the box and in such cases Context Menus are automatically repositioned. You can control how exactly a certain Context Menu would be transposed with this option.

For nested Context Menus it’s usually better to use «x» or «both» for a better UX

500 by default. Accepts Number values grater than 0.

Demo (1 second for the first nested Context Menu and 2 seconds for the second one)

The option controls the amount of time (in ms) before a nested Context Menu is opened after the cursor entered its caller. It also sets the amount of time to pass before the nested Context Menu is closed after a request to close it has been registered.

Note that the delay is set on a parent Context Menu (the one that contains callers) and affects all the nested Context Menus at once. It’s impossible to set the delay for a particular Context Menu exclusively.

Note that we use : so that Vue can understand that we pass a Number rather than a String

Each Context Menu internally consists of the overlay, the wrapper element, the Context Menu element itself and the Context Menu’s slot-elements ( s and other murkup)

You can style any of those elements as you prefer.

Important! Always provide the width property for you custom Context Menus. They may render incorrect in some cases if you don’t!

Adding custom classes to Context Menus allows you to style different Context Menus differently. Bear in mind however that the class would only be added to the overlay, so you’d have to use nested selectors to style certain Context Menus

These are the default styles that you typically don’t want to overwrite with your CSS

You can wrap any Context Menu inside the component as you do with any other components. No restrictions here. However bear in mind that you can’t say the same about caller-items since those can’t be wrapped inside other components (see above)

The Context Menus’ heights are treated automatically out of the box. It means that if your Context Menu has a helluva lot items (or the items themselves are pretty huge) so that the Context Menu can’t fit in the viewport, it’s gonna be shrinked down automatically.

Since v-context-menu is a directive, you can provide it a dynamic value

In such cases when the value changes and the Context Menu is opened it would be automatically substituted with another one. If the new value is null then the already opened Context Menu would automatically close. The same applies for nested Context Menus as well.

Though it’s possible to reactively add/remove items to/from opened Context Menus (e.g. << item >> ) such actions won’t trigger position/height updates. That is because of the restrictions imposed by Vue and it seems like we can do nothing with it. So it’d be better if you stick to the Context Menu substitution pattern described above. However if it’s not an option you can always call the public cm.transpose() method manually which should update (recalculate) the Context Menu’s position and height

The component emits @opened and @closed events when it’s opened or closed respectively. The callback function is called with the Context Menu instance as the first (and the only) argument

Источник

Vue js контекстное меню

A simple yet flexible context menu for Vue. Based on vue-context, but it is styled using dropdown-menu from Bootstrap 4.x (you need to import Bootstrap CSS in your app).

The menu disappears when you expect by using the onblur event and it also disappears when clicked on.

A demo of vue-context can be found here: https://rawilk.github.io/vue-context

The API has changed. Check v2.0.1 documentation if you use the old version.

The following instructions will help you get the vue-context menu up and running on your project.

Import the package and use it in your Vue instance, and add a simple method for the click event.

Add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.

vue-context is inspired from vue-lil-context-menu and Vue.JS Right Click Menu. Ultimately vue-context is intended to provide a simple and lightweight context menu for Vue.

The MIT License (MIT). Please see the License file for more information.

Источник

Open and Close the Context Menu

User Interaction

By default, the ContextMenu appears when a user right-clicks the target element. This action corresponds to the dxcontextmenu event. If you need the ContextMenu to appear when another event is raised, assign the event’s name to the showEvent property. This property can accept several events at once as well as an object.

jQuery

Angular

React

The ContextMenu is closed when a user clicks anywhere outside it. You can redefine this behavior or turn it off completely using the closeOnOutsideClick property. For example, the ContextMenu in the following code will not be closed until its own target element is clicked.

jQuery

Angular

React

The ContextMenu UI component is not supposed to be opened programmatically, but rare scenarios demand this. This article shows how to do this using the Button UI component. This choice is made for purely demonstrational purposes, and you can do the same with another UI component following the same guidelines.

See Also

To open or close the ContextMenu from code, call the show() or hide() method. You can do the same thing using the toggle(showing) method. Pass true or false to this method to open or close the context menu, respectively.

When using Angular, Vue or React, use a different approach. Bind the visible property of the ContextMenu UI component to a component property. After that, change this property or variable, and the context menu will be opened or closed.

Источник