lemon-imui-rx/packages/directives/contextmenu.js

基于lemon-imui的vue聊天组件，支持vue2.x

// import Vue from "vue";
import { isFunction, isEmpty } from "utils/validate";
import LemonPopover from "../components/popover.vue";
let popover;

const hidePopover = () => {
  if (popover) popover.style.display = "none";
};
const showPopover = () => {
  if (popover) popover.style.display = "block";
};
document.addEventListener("click", e => {
  hidePopover();
});
export default {
  hide: hidePopover,
  bind(el, binding, vnode) {
    el.addEventListener(
      binding.modifiers.click ? "click" : "contextmenu",
      e => {
        if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
        if (binding.modifiers.click) e.stopPropagation();
        e.preventDefault();
        LemonPopover.methods.closeAll();
        let component;
        let visibleItems = [];
        if (binding.modifiers.message) component = vnode.context;
        else if (binding.modifiers.contact) component = vnode.child;
        if (!popover) {
          popover = document.createElement("div");
          popover.className = "lemon-contextmenu";
          document.body.appendChild(popover);
        }
        
        popover.innerHTML = binding.value
          .map(item => {
            let visible;
            if (isFunction(item.visible)) {
              visible = item.visible(component);
            } else {
              visible = item.visible === undefined ? true : item.visible;
            }

            if (visible) {
              visibleItems.push(item);
              const icon = item.icon
                ? `<i class="lemon-contextmenu__icon ${item.icon}"></i>`
                : "";
              return `<div style="color:${item.color}" title="${
                item.text
              }" class="lemon-contextmenu__item">${icon}<span>${
                item.text
              }</span></div>`;
            }
            return "";
          })
          .join("");
          let menuHeight =popover.offsetHeight;
          let menuWidth = popover.offsetWidth;
          // 获取屏幕可视区域高度
          let windowHeight = window.innerHeight;
          let windowWidth = window.innerWidth;
          let positionTop = e.clientY + menuHeight > windowHeight ? e.pageY - menuHeight - 5 : e.pageY;
          let positionLeft = e.clientX + menuWidth > windowWidth ? e.pageX - menuWidth -5 : e.pageX;
          popover.style.top = `${positionTop}px`;
          popover.style.left = `${positionLeft}px`;

          popover.childNodes.forEach((node, index) => {
            const { click, render } = visibleItems[index];
            node.addEventListener("click", e => {
              e.stopPropagation();
              if (isFunction(click)) click(e, component, hidePopover);
            });

          // if (isFunction(render)) {
          //   const ins = Vue.extend({
          //     render: h => {
          //       return render(h, component, hidePopover);
          //     },
          //   });
          //   const renderComponent = new ins().$mount();
          //   node.querySelector("span").innerHTML =
          //     renderComponent.$el.outerHTML;
          // }
        });

        showPopover();
      },
    );
  },
};