uv-ui/lib/components/popover/popover.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),m=require("../overlay/index.cjs");require("./popover.vue_vue_type_style_index_0_lang.cjs");const y={class:"uv-popover-content"},h=["onClick"],k={class:"uv-popover-content-item-text"},g={name:"UvPopover"},w=Object.assign(g,{props:{modelValue:{type:Boolean,default:!1},list:{type:Array},keyName:{type:String},closeOnClickAction:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0}},emits:["update:modelValue","change"],setup(o,{emit:r}){const s=o;e.watch(()=>s.modelValue,t=>{p()});const v=e.ref(null),n=e.ref(null),c=e.ref("bottom"),i=e.ref("left"),d=()=>{s.closeOnClickOutside&&r("update:modelValue",!1)},p=()=>{const{top:t,left:u,bottom:l,right:a}=v.value.children[0].getBoundingClientRect();u>screen.availWidth/2?(i.value="right",n.value.style.right=screen.availWidth-a+"px"):(i.value="left",n.value.style.left=u+"px"),t>screen.availHeight/2?(c.value="top",n.value.style.bottom=Number(screen.availHeight-t+10)+"px"):(c.value="bottom",n.value.style.top=Number(l+10)+"px")},f=t=>{t.disabled||(r("change",t),s.closeOnClickAction&&r("update:modelValue",!1))};return(t,u)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("span",{style:{display:"inline-block"},ref_key:"contentRef",ref:v},[e.renderSlot(t.$slots,"reference")],512),e.createVNode(e.Transition,{name:"popover"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"uv-popover",ref_key:"popoverRef",ref:n,style:{}},[e.createElementVNode("div",{class:e.normalizeClass([c.value==="bottom"?"uv-popover-arrow-top":"uv-popover-arrow-bottom",i.value==="left"?"uv-popover-arrow-left":"uv-popover-arrow-right"])},null,2),e.createElementVNode("div",y,[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.list,(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["uv-popover-content-item",l.disabled?"uv-popover-content-item-disabled":""]),key:o.keyName?l[o.keyName]:a,onClick:V=>f(l)},[e.createElementVNode("div",k,e.toDisplayString(o.keyName?l[o.keyName]:a),1)],10,h))),128))])])],512),[[e.vShow,o.modelValue]])]),_:3}),e.createVNode(e.unref(m),{show:o.modelValue,overlay:!1,onClick:d},null,8,["show"])]))}});module.exports=w;