新增模块：flex.css 【快速布局】

新增选项卡右键菜单 Former-commit-id: bbb22c61d92d8aa0a4f9860ce000dc53e26ba23c
2018-08-02 13:57:17 +08:00
parent c2503fe54e
commit b4c4601ba9
8 changed files with 242 additions and 51 deletions
@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="d2-contextmenu"
+    v-show="flag"
+    :style="style">
+    <slot/>
+  </div>
+</template>
+
+<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 () {
+        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 ? 'block' : 'none '
+      }
+    }
+  },
+  methods: {
+    watchContextmenu (event) {
+      if (!this.$el.contains(event.target)) this.flag = false
+      window.removeEventListener('mousedown', this.watchContextmenu)
+    }
+  },
+  mounted () {
+    // 将菜单放置到body下
+    document.querySelector('body').appendChild(this.$el)
+  }
+}
+</script>
+
+<style>
+.d2-contextmenu {
+  position: absolute;
+  padding: 5px 0;
+  z-index: 2018;
+  background: #FFF;
+  border: 1px solid #cfd7e5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+</style>