Your search did not match any results.
Context Menu

Templates

Documentation

The ContextMenu widget provides full control over the appearance and behavior of menu items across all nesting levels.

Copy to CodeSandBox
Apply
Reset
<template> <div> <div class="label"> Right click an image to display the context menu: </div> <img id="image" src="../../../../images/products/5.png" > <dx-context-menu :data-source="items" :width="200" target="#image" @item-click="itemClick" > <template #item="{ data: e }"> <span :class="e.icon"/> <span v-if="e.items" class="dx-icon-spinright" /> {{ e.text }} </template> </dx-context-menu> </div> </template> <script> import DxContextMenu from 'devextreme-vue/context-menu'; import notify from 'devextreme/ui/notify'; import { contextMenuItems as items } from './data.js'; export default { components: { DxContextMenu }, data() { return { items }; }, methods: { itemClick(e) { if (!e.itemData.items) { notify(`The "${ e.itemData.text }" item was clicked`, 'success', 1500); } } }, }; </script> <style> .dx-menu-item-content span { margin-right: 5px; } .dx-menu-item .dx-icon-spinright { position: absolute; top: 7px; right: 2px; } #image{ height: 300px; } .label { color: #767676; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const contextMenuItems = [ { text: 'Share', icon: 'dx-icon-globe', items: [ { text: 'Facebook' }, { text: 'Twitter' }] }, { text: 'Download', icon: 'dx-icon-download' }, { text: 'Add Comment', icon: 'dx-icon-add' }, { text: 'Add to Favorite', icon: 'dx-icon-favorites' } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });