Vue ContextMenu - Customize Item Appearance

For a minor customization of ContextMenu items, you can define specific fields in item data objects. For example, the following code generates three context menu items. Between the first and the second items lies a separator dividing one group of items from another. All the items are supplied with icons.

App.vue
  • <template>
  • <DxContextMenu
  • :items="contextMenuItems"
  • target="#someElement"
  • :visible="true"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxContextMenu from 'devextreme-vue/context-menu';
  •  
  • export default {
  • components: {
  • DxContextMenu
  • },
  • data() {
  • return {
  • contextMenuItems: [
  • { text: 'Zoom In', icon: 'plus' },
  • { text: 'Share', icon: 'message', beginGroup: true },
  • { text: 'Download', icon: 'download' }
  • ]
  • };
  • }
  • };
  • </script>

If you need a more flexible solution, define an itemTemplate.

App.vue
  • <template>
  • <DxContextMenu
  • :items="contextMenuItems"
  • target="#someElement"
  • item-template="item"
  • :visible="true">
  • <template #item="{ data, index }">
  • <div>
  • <span :class="'dx-icon-' + data.icon"></span>
  • <i :style="{marginLeft: 5}">{{data.text}}</i><span> [{{index + 1}}]</span>
  • </div>
  • </template>
  • </DxContextMenu>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxContextMenu from 'devextreme-vue/context-menu';
  •  
  • export default {
  • components: {
  • DxContextMenu
  • },
  • data() {
  • return {
  • contextMenuItems: [
  • { text: "Zoom In", icon: "plus" },
  • { text: "Share", icon: "message" },
  • { text: "Download", icon: "download" }
  • ]
  • };
  • }
  • };
  • </script>

View Demo

See Also