lemon-imui/packages/directives/dropdown.js

import Vue from 'vue';
import {isFunction,isEmpty} from 'utils/validate';
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('contextmenu',(e)=>{
      if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
      e.preventDefault();
      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-dropdown';
        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-dropdown__icon ${item.icon}"></i>` : '';
          return `<div style="color:${item.color}" title="${item.text}" class="lemon-dropdown__item">${icon}<span>${item.text}</span></div>`;
        }
        return '';
      }).join("");
      popover.style.top = `${e.pageY}px`;
      popover.style.left = `${e.pageX}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();
    });
  },
  inserted(el, binding, vnode){
    
  }
}