animate-popup
Version:
基于vant4的vue3弹窗,拥有ios16的沉浸式效果!
2 lines (1 loc) • 2.27 kB
JavaScript
(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["animate-popup"]={},o.Vue))})(this,function(o,e){"use strict";const S="",g="",u=(t,l)=>{const a=t.__vccOpts||t;for(const[p,n]of l)a[p]=n;return a},f=t=>(e.pushScopeId("data-v-1668d6fb"),t=t(),e.popScopeId(),t),m={class:"popup-main"},y=f(()=>e.createElementVNode("div",{class:"pt-16"},null,-1)),_=e.defineComponent({name:"AnimatePopup"}),d=u(Object.assign(_,{props:{isShow:{type:Boolean,default:!1},height:{type:String,default:"96vh"},title:{type:String,default:""},isScaleAni:{type:Boolean,default:!0}},emits:["update:isShow"],setup(t,{emit:l}){const a=t,p=a.isScaleAni?{backgroundColor:"transparent"}:{},n=e.computed({get(){return a.isShow},set(i){l("update:isShow",i)}});return e.onMounted(()=>{let i=document.getElementById("app");const s=document.getElementsByTagName("body")[0];e.watch(n,c=>{a.isScaleAni&&(c?(i.classList.add("app-scale-class"),s.classList.add("body-scale-class")):(i.classList.remove("app-scale-class"),s.classList.remove("body-scale-class")))})}),(i,s)=>{const c=e.resolveComponent("van-popup");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(c,{class:"dialog-scale-popup",show:e.unref(n),"onUpdate:show":s[0]||(s[0]=r=>e.isRef(n)?n.value=r:null),closeable:"",round:"","safe-area-inset-bottom":"",style:e.normalizeStyle({height:t.height}),position:"bottom",onClickCloseIcon:s[1]||(s[1]=r=>n.value=!1),teleport:"body","overlay-style":e.unref(p)},{default:e.withCtx(()=>[e.createElementVNode("div",m,[y,e.createElementVNode("div",{class:e.normalizeClass(["tc fz-16 fwb text-333",t.title?"pb-12 pt-10":"pt-12 pb-16"])},e.toDisplayString(t.title),3),e.createElementVNode("div",{class:"popup-content pl-14 pr-14 bos text-666",style:e.normalizeStyle({height:t.title?"calc(100% - 68px)":"calc(100% - 58px)"})},[e.renderSlot(i.$slots,"main",{},void 0,!0)],4)])]),_:3},8,["show","style","overlay-style"])])}}}),[["__scopeId","data-v-1668d6fb"]]),h=[d],b={install:function(t){h.forEach(l=>{t.component(l.name,l)})}};o.AnimatePopup=d,o.default=b,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});