fan
72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
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('contextmenu',(e)=>{
|
|
if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
|
|
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("");
|
|
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){
|
|
|
|
}
|
|
} |