{"version":3,"sources":["webpack:///./src/components/rightMenu.vue?e20d","webpack:///./src/components/rightMenu.vue","webpack:///src/components/rightMenu.vue","webpack:///./src/components/rightMenu.vue?3b28","webpack:///./src/components/rightMenu.vue?09ef"],"names":["render","_vm","this","_c","_self","staticClass","_l","rightclickInfo","menulists","item","key","btnName","on","$event","stopPropagation","fnHandler","class","icoName","_v","_s","staticRenderFns","name","props","type","Object","default","position","x","y","fnName","params","classIndex","Number","watch","val","console","log","innerWidth","window","innerHeight","menu","document","getElementsByClassName","style","display","menuHeight","length","menuWidth","top","left","addEventListener","hide","methods","e","button","removeEventListener","$emit","component"],"mappings":"kHAAA,W,gECAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,KAAK,CAACE,YAAY,oBAAoBJ,EAAIK,GAAIL,EAAIM,eAAeC,WAAW,SAASC,GAAM,OAAON,EAAG,KAAK,CAACO,IAAID,EAAKE,QAAQN,YAAY,wBAAwBO,GAAG,CAAC,MAAQ,SAASC,GAAiC,OAAzBA,EAAOC,kBAAyBb,EAAIc,UAAUN,MAAS,CAACN,EAAG,MAAM,CAACE,YAAY,6BAA6B,CAACF,EAAG,IAAI,CAACE,YAAY,MAAMW,MAAMP,EAAKQ,UAAUd,EAAG,OAAO,CAACF,EAAIiB,GAAGjB,EAAIkB,GAAGV,EAAKE,mBAAkB,IAE1cS,EAAkB,GCiBP,G,UAAA,CACfC,KAAA,YACAC,MAAA,CAEAf,eAAA,CACAgB,KAAAC,OACAC,QAAA,WACA,OACAC,SAAA,CAEAC,EAAA,KACAC,EAAA,MAEApB,UAAA,CACA,CACAqB,OAAA,GACAC,OAAA,GACAb,QAAA,GACAN,QAAA,QAOAoB,WAAA,CACAR,KAAAS,OACAP,QAAA,IAGAQ,MAAA,CAEA,mCAAAC,GACAC,QAAAC,IAAA,SACA,IAAAT,EAAAO,EAAAP,EACAC,EAAAM,EAAAN,EACAS,EAAAC,OAAAD,WACAE,EAAAD,OAAAC,YAKAC,EACAC,SAAAC,uBAAA,yBAAAX,YACAS,EAAAG,MAAAC,QAAA,QACA,IAAAC,EAAA,QAAAtC,eAAAC,UAAAsC,OACAC,EAAA,IAEAP,EAAAG,MAAAK,KACApB,EAAAiB,EAAAN,IAAAM,EAAAjB,GAAA,KACAY,EAAAG,MAAAM,MACAtB,EAAAoB,EAAAV,IAAAU,EAAApB,GAAA,KAEAc,SAAAS,iBAAA,eAAAC,MAAA,KAGAC,QAAA,CACAD,KAAA,SAAAE,GACA,OAAAA,EAAAC,OAAA,CAEA,IAAAd,EACAC,SAAAC,uBAAA,yBAAAX,YACAS,EAAAG,MAAAC,QAAA,OACAH,SAAAc,oBAAA,eAAAJ,QAGApC,UAAA,SAAAN,GACA,KAAA+C,MAAA/C,EAAAoB,OAAApB,EAAAqB,YCtFkV,I,wBCQ9U2B,EAAY,eACd,EACAzD,EACAoB,GACA,EACA,KACA,WACA,MAIa,aAAAqC,E","file":"static/js/chunk.chunk-4339897a.1743477987759.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./rightMenu.vue?vue&type=style&index=0&id=50d4bbb4&prod&lang=less&scoped=true\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('ul',{staticClass:\"table-right-menu\"},_vm._l((_vm.rightclickInfo.menulists),function(item){return _c('li',{key:item.btnName,staticClass:\"table-right-menu-item\",on:{\"click\":function($event){$event.stopPropagation();return _vm.fnHandler(item)}}},[_c('div',{staticClass:\"table-right-menu-item-btn\"},[_c('i',{staticClass:\"iii\",class:item.icoName}),_c('span',[_vm._v(_vm._s(item.btnName))])])])}),0)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <ul class=\"table-right-menu\">\n    <!-- 循环菜单项，事件带参数抛出 -->\n    <li\n      v-for=\"item in rightclickInfo.menulists\"\n      :key=\"item.btnName\"\n      class=\"table-right-menu-item\"\n      @click.stop=\"fnHandler(item)\"\n    >\n      <div class=\"table-right-menu-item-btn\">\n        <!-- 图标和按钮名 -->\n        <i :class=\"item.icoName\" class=\"iii\" />\n        <span>{{ item.btnName }}</span>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<script>\nexport default {\n  name: \"rightMenu\",\n  props: {\n    // 接收右键点击的信息\n    rightclickInfo: {\n      type: Object,\n      default: () => {\n        return {\n          position: {\n            // 右键点击的位置\n            x: null,\n            y: null,\n          },\n          menulists: [\n            {\n              fnName: \"\", // 点击菜单项的事件名\n              params: {}, // 点击的参数\n              icoName: \"\", // 图标名\n              btnName: \"\", // 按钮名\n            },\n          ],\n        };\n      },\n    },\n    // 重要参数，用于标识是哪个右键菜单dom元素\n    classIndex: {\n      type: Number,\n      default: 0,\n    },\n  },\n  watch: {\n    // 监听右键点击时点击位置的变化，只要变化了，就弹出右键菜单供用户点击操作\n    \"rightclickInfo.position\"(val) {\n      console.log(\"22222\");\n      let x = val.x; // 获取x轴坐标\n      let y = val.y; // 获取y轴坐标\n      let innerWidth = window.innerWidth; // 获取页面可是区域宽度，即页面的宽度\n      let innerHeight = window.innerHeight; // 获取可视区域高度，即页面的高度\n      /**\n       * 注意，这里要使用getElementsByClassName去选中对应dom，因为右键菜单组件可能被多处使用\n       * classIndex标识就是去找到对应的那个右键菜单组件的，需要加的\n       * */\n      let menu =\n        document.getElementsByClassName(\"table-right-menu\")[this.classIndex];\n      menu.style.display = \"block\";\n      let menuHeight = this.rightclickInfo.menulists.length * 30; // 菜单容器高\n      let menuWidth = 180; // 菜单容器宽\n      // 菜单的位置计算\n      menu.style.top =\n        (y + menuHeight > innerHeight ? innerHeight - menuHeight : y) + \"px\";\n      menu.style.left =\n        (x + menuWidth > innerWidth ? innerWidth - menuWidth : x) + \"px\";\n      // 因为菜单还要关闭，就绑定一个鼠标点击事件，通过e.button判断点击的是否是左键，左键关闭菜单\n      document.addEventListener(\"mouseup\", this.hide, false);\n    },\n  },\n  methods: {\n    hide(e) {\n      if (e.button === 0) {\n        // 0是左键、1是滚轮按钮或中间按钮（若有）、2鼠标右键\n        let menu =\n          document.getElementsByClassName(\"table-right-menu\")[this.classIndex]; // 同样的精确查找\n        menu.style.display = \"none\"; // 菜单关闭\n        document.removeEventListener(\"mouseup\", this.hide); // 及时解绑监听事件\n      }\n    },\n    fnHandler(item) {\n      this.$emit(item.fnName, item.params);\n      // 事件再传出去，即为：\n      // this.$emit('事件名',事件参数)\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.table-right-menu {\n  color: #333;\n  background: #fff;\n  border-radius: 4px;\n  list-style-type: none;\n  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);\n  font-size: 12px;\n  font-weight: 500;\n  box-sizing: border-box;\n  padding: 4px 0;\n  // 固定定位，抬高层级，初始隐藏，右击时置为display:block显示\n  position: fixed;\n  z-index: 3000;\n  display: none;\n  .table-right-menu-item {\n    box-sizing: border-box;\n    padding: 6px 12px;\n    border-radius: 4px;\n    transition: all 0.36s;\n    cursor: pointer;\n    .table-right-menu-item-btn {\n      .iii {\n        margin-right: 4px;\n      }\n    }\n  }\n  .table-right-menu-item:hover {\n    background-color: #ebf5ff;\n    color: #be3c6e;\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./rightMenu.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./rightMenu.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./rightMenu.vue?vue&type=template&id=50d4bbb4&scoped=true\"\nimport script from \"./rightMenu.vue?vue&type=script&lang=js\"\nexport * from \"./rightMenu.vue?vue&type=script&lang=js\"\nimport style0 from \"./rightMenu.vue?vue&type=style&index=0&id=50d4bbb4&prod&lang=less&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"50d4bbb4\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}