vue3-menus/dist/vue3-menus.min.js

Vue3.0 左右键菜单

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Menus={},e.Vue)}(this,(function(e,n){"use strict";var t,i,l;o=".menus-fade-enter-active,\n.menus-fade-leave-active {\n  transition: opacity 0.2s ease-in-out;\n}\n.menus-fade-enter-from,\n.menus-fade-leave-to {\n  opacity: 0;\n}\n\n.v3-menus {\n  position: fixed;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n  background: #fff;\n  border-radius: 4px;\n  padding: 8px 0;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.v3-menus-body {\n  display: block;\n}\n\n.v3-menus-item {\n  display: flex;\n  line-height: 2rem;\n  padding: 0 1rem;\n  margin: 0;\n  font-size: 0.8rem;\n  outline: 0;\n  align-items: center;\n  transition: 0.2s;\n  box-sizing: border-box;\n  list-style: none;\n  border-bottom: 1px solid #00000000;\n}\n\n.v3-menus-divided {\n  border-bottom-color: #ebeef5;\n}\n\n.v3-menus-icon {\n  display: flex;\n  margin-right: 0.6rem;\n  width: 1rem;\n}\n\n.v3-menus-label {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.v3-menus-suffix {\n  margin-left: 1.5rem;\n  font-size: 0.39rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.v3-menus-available {\n  color: #606266;\n  cursor: pointer;\n}\n\n.v3-menus-available:hover {\n  background: #ecf5ff;\n  color: #409eff;\n}\n\n.v3-menus-disabled {\n  color: #c0c4cc;\n  cursor: not-allowed;\n}\n\n.v3-menus-active {\n  background: #ecf5ff;\n  color: #409eff;\n}\n\n.v3-menus-tip {\n  font-size: 9px;\n  color: #999;\n}\n",l=(t=void 0===t?{}:t).insertAt,o&&"undefined"!=typeof document&&(i=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===l&&i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o)));var o={menus:{type:Array,required:!0},menusClass:{type:String,default:null},itemClass:{type:String,default:null},event:{type:Object,required:!0},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:Number,default:3},direction:{type:String,default:"right"},open:{type:Boolean,default:!1},args:{type:[Object,Function,Array,Boolean,String],default:{}}};const a=n.defineComponent({name:"vue3-menus",inheritAttrs:!1,props:o,setup(e,{slots:t,attrs:i}){const l=globalThis.document.documentElement.clientWidth,o=globalThis.document.documentElement.clientHeight,s=n.getCurrentInstance().proxy,u=n.ref(e.open),d={},r=n.ref(null),c=n.ref(-1),v=n.ref(0),m=n.ref(0);let p=e.direction;const f=n.computed((()=>{for(let n=0;n<e.menus.length;n++)if(void 0!==e.menus[n].icon)return!0})),h=n.computed((()=>({x:e.event.clientX,y:e.event.clientY,width:e.event.width||0,height:e.event.height||0}))),x=n.computed((()=>({left:v.value+"px",top:m.value+"px",minWidth:e.minWidth+"px",maxWidth:"none"==e.maxWidth?e.maxWidth:e.maxWidth+"px",zIndex:e.zIndex})));function b(){c.value=-1,u.value=!1,d&&d.instance&&(d.instance.close.bind(d.instance)(),d.instance=null,d.index=null,s.closeAll&&s.closeAll())}function g(i,l,o){if(i.preventDefault(),c.value=o,l&&!l.disabled&&!l.hidden){if(d.instance){if(d.index===o)return;d.instance.close.bind(d.instance)(),d.instance=null,d.index=null}if(l.children){const u=l.enter&&"function"==typeof l.enter?l.enter:null;if(u){var s=u(l,e.args);if(!1===s||null===s)return}i=i.target.getBoundingClientRect();const r=n.createVNode(a,{...e,menus:l.children,direction:p,event:{clientX:i.x+3,clientY:i.y-8,width:i.width-6,height:i.width},open:!1},t);i=globalThis.document.createElement("div"),n.render(r,i),r.component.props.open=!0,r.component.proxy.close=w,d.instance=r.component.proxy,d.instance.container=i,d.instance.props=r.component.props,d.index=o}}}function y(n,t){if(n.preventDefault(),t&&!t.disabled){const l=t.click&&"function"==typeof t.click?t.click:null;var i;l&&(!1!==(i=l(t,e.args))&&null!==i||n.stopPropagation()),t.children&&n.stopPropagation()}else n.stopPropagation()}function w(){this.show=!1,this.self&&this.self.instance&&this.self.instance.close(),n.nextTick((()=>{n.render(null,this.container)}))}n.watch((()=>e.open),(e=>u.value=e)),n.watch(u,(e=>{e?n.nextTick((()=>{var e,n=r.value.offsetWidth,t=r.value.offsetHeight;"left"===p?(e=n,v.value=h.value.x-e,p="left",v.value<0&&(p="right",0===h.value.width||void 0===h.value.width?v.value=0:v.value=h.value.x+h.value.width)):(e=l,n=n,v.value=h.value.x+h.value.width,p="right",v.value+n>e&&(p="left",0===h.value.width||void 0===h.value.width?v.value=e-n:v.value=h.value.x-n)),m.value=h.value.y,h.value.y+t>o&&(0===h.value.height||void 0===h.value.height?m.value=h.value.y-t:m.value=o-t),setTimeout((()=>{globalThis.document.addEventListener("click",b),globalThis.document.addEventListener("contextmenu",b),globalThis.document.addEventListener("wheel",b)}),0)})):(c.value=-1,globalThis.document.removeEventListener("click",b),globalThis.document.removeEventListener("contextmenu",b),globalThis.document.removeEventListener("wheel",b))}),{immediate:!0});const{default:T,label:E,icon:N,suffix:k}=t,V=["v3-menus",i.class,e.menusClass];return()=>n.createVNode(n.Teleport,{to:"body"},{default:()=>[n.createVNode(n.Transition,{name:"menus-fade"},{default:()=>[u.value?n.createVNode("div",{ref:r,class:V,style:x.value,onWheel:e=>e.preventDefault(),onContextmenu:e=>e.preventDefault()},[n.createVNode("div",{class:"v3-menus-body"},[e.menus.map(((t,i)=>{if(t.hidden)return null;if(T)return n.createVNode("div",{onContextmenu:e=>y(e,t),onClick:e=>y(e,t),onMouseenter:e=>g(e,t,i)},[T({menu:t,activeIndex:c.value,index:i})]);{let l=[e.itemClass,"v3-menus-item",t.disabled?"v3-menus-disabled":"v3-menus-available"];return l=l.concat([t.divided?"v3-menus-divided":null,t.disabled||c.value!==i?null:"v3-menus-active"]),n.createVNode("div",{style:t.style,class:l.join(" "),onClick:e=>y(e,t),onMouseenter:e=>g(e,t,i),onContextmenu:e=>y(e,t)},[f.value?n.createVNode("div",{class:"v3-menus-icon "},[N?N({menu:t,activeIndex:c.value,index:i}):n.createVNode("span",{innerHTML:t.icon},null)]):null,E?n.createVNode("span",{class:"v3-menus-label"},[E({menu:t,activeIndex:c.value,index:i})]):n.createVNode("span",{class:"v3-menus-label"},[t.label]),t.children||t.tip?n.createVNode("div",{class:"v3-menus-suffix"},[k?k({menu:t,activeIndex:c.value,index:i}):t.children?"▶":t.tip?n.createVNode("span",{class:"v3-menus-tip"},[t.tip]):null]):null])}}))])]):null]})]})}});function s(e,t,i){let l={};l=Array.isArray(e)?{menus:e,event:i,args:t,open:!1}:{...e,args:t,event:i,open:!1};const o=n.createVNode(a,l),s=globalThis.document.createElement("div");n.render(o,s),o.component.props.open=!0,o.component.proxy.closeAll=()=>{n.nextTick((()=>{n.render(null,s)}))},null!=l.prevent&&!l.prevent||i.preventDefault()}function u(e,n={}){e.component(n.name||a.name,a),e.directive("menus",d),e.config.globalProperties.$menusEvent=(e,n,t)=>s(n,t||{},e)}const d={mounted(e,{value:n,arg:t}){var i=e.__vnode||{};void 0===t||"right"===t?e.addEventListener("contextmenu",s.bind(e,n,i.props||{})):"left"===t?e.addEventListener("click",s.bind(e,n,i.props||{})):"all"===t&&(e.addEventListener("contextmenu",s.bind(e,n,i.props||{})),e.addEventListener("click",s.bind(e,n,i.props||{})))},unmounted(e){e.removeEventListener("contextmenu",s),e.removeEventListener("click",s)}};e.Vue3Menus=a,e.default=function(e){e.use(u)},e.directive=d,e.menusEvent=(e,n,t)=>s(n,t||{},e),Object.defineProperty(e,"__esModule",{value:!0})}));