右键菜单 sxm 2022-3-15

src/views/modules/common/right_click_menu.vue

@@ -0,0 +1,113 @@
+<!-- 菜单页代码  contextButton/index.vue -->
+<template>
+  <div id="contextmenu" class="contextmenu">
+    <div class="contextmenu__item" @click="handleOne()">菜单一</div>
+    <div class="contextmenu__item" @click="handleTwo()">菜单二</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单三</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单4</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单5</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单6</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单7</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单8</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单9</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单10</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单11</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单12</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+    <div class="contextmenu__item" @click="handleThree()">菜单13</div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {}
+  },
+  methods: {
+    init(row, column, event) {
+      // 设置菜单出现的位置
+      // 具体显示位置根据自己需求进行调节
+      let menu = document.querySelector('#contextmenu')
+      let height = 24 * 24   // 右键菜单 高度
+      if (height > (window.innerHeight - 180)) {
+        height = window.innerHeight - 200
+      }
+      menu.style.height = height + "px"
+      let topcha = document.body.clientHeight - height    // 菜单页面高度差
+      let cha = document.body.clientHeight - event.clientY   // 鼠标位置差
+      console.log(document.body.clientHeight, event.clientY, cha, topcha, height)
+      // 防止菜单太靠底，根据可视高度调整菜单出现位置
+      if (cha < height) {
+        menu.style.top = document.body.clientHeight - (height+80) + 'px'
+      } else {
+        menu.style.top = event.clientY - 80 + 'px'
+      }
+
+      menu.style.left = event.clientX + -200 + 'px'
+      document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
+
+    },
+    foo() {
+      this.$emit('foo')
+    },
+    handleOne() {
+      this.$emit('handleOne')
+    },
+    handleTwo() {
+      this.$emit('handleTwo')
+    },
+    handleThree() {
+      this.$emit('handleThree')
+    },
+  }
+}
+</script>
+
+<style scoped>
+.contextmenu__item {
+  display: block;
+  line-height: 24px;
+  text-align: center;
+}
+
+.contextmenu__item:not(:last-child) {
+  border-bottom: 1px solid rgba(64, 158, 255, .2);
+}
+
+.contextmenu {
+  overflow: auto;
+  position: absolute;
+  background-color: #fff;
+  width: 100px;
+  /*height: 106px;*/
+  font-size: 12px;
+  color: #17B3A3;;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 1px solid rgba(64, 158, 255, .2);
+  white-space: nowrap;
+  z-index: 2100;
+}
+
+.contextmenu__item:hover {
+  cursor: pointer;
+  background: #17B3A3;;
+  border-color: #17B3A3;;
+  color: #fff;
+}
+</style>