diff --git a/package.json b/package.json
index fa74fbf1..e966cc19 100755
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "path-posix": "^1.0.0",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
+    "v-contextmenu": "^2.7.0",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",
     "vue-i18n": "^7.4.2",
diff --git a/src/main.js b/src/main.js
index 4be272ea..26cfe4d3 100755
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,10 @@ import '@/mock/register'
 // vuex
 import store from '@/store/index.js'
 
+// 右键菜单
+import contentmenu from 'v-contextmenu'
+import 'v-contextmenu/dist/index.css'
+
 // 插件 导出文件
 import pluginImport from '@/plugin/import'
 // 插件 导出文件
@@ -45,6 +49,7 @@ import pluginOpen from '@/plugin/open'
 import bigdataTable from '@/plugin/vue-bigdata-table'
 
 Vue.use(ElementUI)
+Vue.use(contentmenu)
 
 Vue.use(pluginImport)
 Vue.use(pluginExport)
diff --git a/src/menu/index.js b/src/menu/index.js
index 556dfa29..588660c2 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -95,6 +95,15 @@ const demoComponents = {
         { path: `${pre}markdown/url`, title: '异步加载文件' }
       ]
     },
+    {
+      path: `${pre}contextmenu`,
+      title: '右键菜单',
+      children: [
+        { path: `${pre}contextmenu/simple`, title: '基础' },
+        { path: `${pre}contextmenu/divier`, title: '分割线' },
+        { path: `${pre}contextmenu/group`, title: '按钮组' }
+      ]
+    },
     { path: `${pre}bigdata-table`, title: '百万数量级表格' },
     { path: `${pre}scrollbar`, title: 'ElementUI 滚动条组件' },
     { path: `${pre}countup`, title: '数字动画' },
diff --git a/src/pages/demo/components/contextmenu/divier.vue b/src/pages/demo/components/contextmenu/divier.vue
new file mode 100644
index 00000000..63e874bf
--- /dev/null
+++ b/src/pages/demo/components/contextmenu/divier.vue
@@ -0,0 +1,31 @@
+<template>
+  <d2-container>
+    <template slot="header">分割线</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>
diff --git a/src/pages/demo/components/contextmenu/group.vue b/src/pages/demo/components/contextmenu/group.vue
new file mode 100644
index 00000000..927763f9
--- /dev/null
+++ b/src/pages/demo/components/contextmenu/group.vue
@@ -0,0 +1,29 @@
+<template>
+  <d2-container>
+    <template slot="header">分割线</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group>
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-group>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="github"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="qq"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="weixin"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="google-plus"/></v-contextmenu-item>
+      </v-contextmenu-group>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item>菜单4</v-contextmenu-item>
+      <v-contextmenu-item>菜单5</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>
diff --git a/src/pages/demo/components/contextmenu/simple.vue b/src/pages/demo/components/contextmenu/simple.vue
new file mode 100644
index 00000000..09dd5183
--- /dev/null
+++ b/src/pages/demo/components/contextmenu/simple.vue
@@ -0,0 +1,30 @@
+<template>
+  <d2-container>
+    <template slot="header">基础</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>
diff --git a/src/pages/demo/components/contextmenu/style/pub.scss b/src/pages/demo/components/contextmenu/style/pub.scss
new file mode 100644
index 00000000..5dc547dd
--- /dev/null
+++ b/src/pages/demo/components/contextmenu/style/pub.scss
@@ -0,0 +1,15 @@
+@import '~@/assets/style/public.scss';
+.contextmenu-pad {
+  height: 300px;
+  background-color: $color-bg;
+  border: 1px solid $color-border-1;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  color: $color-info;
+}
+.contextmenu-icon {
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/router/index.js.REMOVED.git-id b/src/router/index.js.REMOVED.git-id
index 379cbd2d..43600d62 100644
--- a/src/router/index.js.REMOVED.git-id
+++ b/src/router/index.js.REMOVED.git-id
@@ -1 +1 @@
-ddf919108dc68f1f7811c033e619dd82d94ef14c
\ No newline at end of file
+ca9703fe75f6928e93a03443767f2b87cbe5ef2a
\ No newline at end of file