新增模块：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,61 @@
+<template>
+  <div
+    class="d2-contentmenu-list"
+    @click="rowClick">
+    <div
+      v-for="item in menulist"
+      :key="item.value"
+      :data-value="item.value"
+      class="d2-contentmenu-item"
+      flex="cross:center main:center">
+      <d2-icon
+        v-if="item.icon"
+        :name="item.icon"/>
+      <div
+        class="d2-contentmenu-item-title"
+        flex-box="1">
+        {{item.title}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-contextmenu-list',
+  props: {
+    menulist: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    rowClick (event) {
+      let target = event.target
+      while (!target.dataset.value) {
+        target = target.parentNode
+      }
+      this.$emit('rowClick', target.dataset.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-contentmenu-list {
+  .d2-contentmenu-item {
+    padding: 8px 20px 8px 15px;
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+    &:hover {
+      background: #ecf5ff;
+      color: #66b1ff;
+    }
+    .d2-contentmenu-item-title {
+      margin-left: 10px;
+    }
+  }
+}
+</style>
@@ -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>