完成第一步：定制自己的右键菜单

Former-commit-id: ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly 37d262cdbc810790b833d06503ca0c38d940310c [formerly 2afb0e2f7d7ca0d7ef3df1a34ccbf726786370d6]]]]]
Former-commit-id: 5868cdaeb5da645fd4964e4f8d0375e9bd8df178
Former-commit-id: 3742735054ffd6dea30adab4803c9d4187091467
Former-commit-id: 4907c8e6ed8b8769d5f441076d9e4c65474440d9 [formerly 4dab0307c98aef7e71ba749887fbb95a48b12ed5]
Former-commit-id: 224a72f5de9cdabacdac076fb58516dbca6a0216
Former-commit-id: 6f1576eec600ef6f192850f449ac6b67e71f30e1
Former-commit-id: 095d0f4d404728bb68ee56e4193ad4d53548a119
Former-commit-id: 9da6f4c2e4c0c2ef4f5ae43b34d9ad1c5f0910c0
Former-commit-id: 7b871cd75a69dfea4053644bc8852db779b67fb6

src/layout/header-aside/components/contextmenu/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="d2-contextmenu" v-show="flag" :style="style">
+    <slot />
+  </div>
+</template>
+<style>
+  .d2-contextmenu {
+    position: absolute;
+    padding: 5px;
+    z-index: 2018;
+    background: white;
+    border: 1px solid #cfd7e5;
+    border-radius: 3px;
+    box-shadow: 0px 0px 5px #ccc;
+  }
+</style>
+<script>
+export default {
+  name: 'd2-contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    flag: {
+      get () {
+        console.log('change flag')
+        if (this.visible) {
+          // 注册全局监听事件[目前只考虑鼠标解除触发]
+          window.addEventListener('mousedown', this.watchContextmenu)
+        }
+        return this.visible
+      },
+      set (newVal) {
+        this.$emit('update:visible', newVal)
+      }
+    },
+    style () {
+      return {
+        left: this.x + 'px',
+        top: this.y + 'px',
+        display: this.visible === true ? 'block' : 'none '
+      }
+    }
+  },
+  methods: {
+    watchContextmenu () {
+      this.flag = false
+      window.removeEventListener('mousedown', this.watchContextmenu)
+    }
+  },
+  mounted () {
+    // 将菜单放置到body下
+    document.querySelector('body').appendChild(this.$el)
+  }
+}
+</script>