# DgContextmenu 菜单

### 基础用法

::: demo 组件 Contextmenu 使用示例

```vue
<template>
  <div style="overflow: hidden">
    <dg-Contextmenu :contextMenuData="contextMenuData"></dg-Contextmenu>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      contextMenuData: {
        menuName: 'demo',
        axis: {
          x: null,
          y: null,
        },
        menulists: [
          {
            btnName: '选项1111111',
            icoName: 'el-icon-shopping-cart-2',
            children: [
              {
                icoName: 'fa fa-adn',
                btnName: '选项1-1',
                children: [
                  {
                    icoName: 'fa fa-file',
                    children: [
                      {
                        icoName: 'fa fa-android',
                        fnHandler: 'Handler1',
                        btnName: '选项1-1-1',
                      },
                    ],
                    btnName: '选项1-1-1',
                  },
                ],
              },
            ],
          },
          {
            btnName: '选项2',
            icoName: 'el-icon-document',
            children: [
              {
                fnHandler: 'Handler5',
                btnName: '选项2-1',
              },
            ],
          },
          {
            btnName: '选项3',
            fnHandler: 'Handler4',
          },
          {
            btnName: '选项4',
            disabled: true,
          },
        ],
      },
    }
  },
  methods: {},
}
</script>
```

:::