2 lines
9.2 KiB
JavaScript
2 lines
9.2 KiB
JavaScript
import{bJ as t,R as s,S as i,e,f as o,w as a,P as n,j as r,p as h,z as l,a2 as d,a3 as c,bK as p,q as u,m}from"./index-RXP3BP3O.js";import{_ as f}from"./_plugin-vue_export-helper.BCo6x5W8.js";const g=f({name:"uniTransition",emits:["click","change"],props:{show:{type:Boolean,default:!1},modeClass:{type:[Array,String],default:()=>"fade"},duration:{type:Number,default:300},styles:{type:Object,default:()=>({})},customClass:{type:String,default:""},onceRender:{type:Boolean,default:!1}},data:()=>({isShow:!1,transform:"",opacity:0,animationData:{},durationTime:300,config:{}}),watch:{show:{handler(t){t?this.open():this.isShow&&this.close()},immediate:!0}},computed:{stylesObject(){let t={...this.styles,"transition-duration":this.duration/1e3+"s"},s="";for(let i in t){s+=this.toLine(i)+":"+t[i]+";"}return s},transformStyles(){return"transform:"+this.transform+";opacity:"+this.opacity+";"+this.stylesObject}},created(){this.config={duration:this.duration,timingFunction:"ease",transformOrigin:"50% 50%",delay:0},this.durationTime=this.duration},methods:{init(s={}){s.duration&&(this.durationTime=s.duration),this.animation=t(Object.assign(this.config,s),this)},onClick(){this.$emit("click",{detail:this.isShow})},step(t,s={}){return this.animation?(Object.keys(t).forEach(s=>{const i=t[s];"function"==typeof this.animation[s]&&(Array.isArray(i)?this.animation[s](...i):this.animation[s](i))}),this.animation.step(s),this):this},run(t){this.animation&&this.animation.run(t)},open(){clearTimeout(this.timer),this.isShow=!0,this.transform=this.styleInit(!1).transform||"",this.opacity=this.styleInit(!1).opacity||0,this.$nextTick(()=>{this.timer=setTimeout(()=>{this.animation=t(this.config,this),this.tranfromInit(!1).step(),this.animation.run(()=>{this.transform="",this.opacity=this.styleInit(!1).opacity||1,this.$emit("change",{detail:this.isShow})})},80)})},close(t){this.animation&&this.tranfromInit(!0).step().run(()=>{this.isShow=!1,this.animationData=null,this.animation=null;let{opacity:t,transform:s}=this.styleInit(!1);this.opacity=t||1,this.transform=s,this.$emit("change",{detail:this.isShow})})},styleInit(t){let s={transform:"",opacity:1};const i=(t,i)=>{const e=this.animationType(t)[i];i.startsWith("fade")?s.opacity=e:s.transform+=e+" "};return"string"==typeof this.modeClass?i(t,this.modeClass):this.modeClass.forEach(s=>i(t,s)),s},tranfromInit(t){let s=(t,s)=>{let i=null;"fade"===s?i=t?0:1:(i=t?"-100%":"0","zoom-in"===s&&(i=t?.8:1),"zoom-out"===s&&(i=t?1.2:1),"slide-right"===s&&(i=t?"100%":"0"),"slide-bottom"===s&&(i=t?"100%":"0")),this.animation[this.animationMode()[s]](i)};return"string"==typeof this.modeClass?s(t,this.modeClass):this.modeClass.forEach(i=>{s(t,i)}),this.animation},animationType:t=>({fade:t?1:0,"slide-top":`translateY(${t?"0":"-100%"})`,"slide-right":`translateX(${t?"0":"100%"})`,"slide-bottom":`translateY(${t?"0":"100%"})`,"slide-left":`translateX(${t?"0":"-100%"})`,"zoom-in":`scaleX(${t?1:.8}) scaleY(${t?1:.8})`,"zoom-out":`scaleX(${t?1:1.2}) scaleY(${t?1:1.2})`}),animationMode:()=>({fade:"opacity","slide-top":"translateY","slide-right":"translateX","slide-bottom":"translateY","slide-left":"translateX","zoom-in":"scale","zoom-out":"scale"}),toLine:t=>t.replace(/([A-Z])/g,"-$1").toLowerCase()}},[["render",function(t,d,c,p,u,m){const f=l;return s((e(),o(f,{ref:"ani",animation:u.animationData,class:r(c.customClass),style:h(m.transformStyles),onClick:m.onClick},{default:a(()=>[n(t.$slots,"default")]),_:3},8,["animation","class","style","onClick"])),[[i,u.isShow]])}]]);const y=f({name:"uniPopup",components:{keypress:{name:"Keypress",props:{disable:{type:Boolean,default:!1}},mounted(){const t={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]};document.addEventListener("keyup",s=>{if(this.disable)return;const i=Object.keys(t).find(i=>{const e=s.key,o=t[i];return o===e||Array.isArray(o)&&o.includes(e)});i&&setTimeout(()=>{this.$emit(i,{})},0)})},render:()=>{}}},emits:["change","maskClick"],props:{animation:{type:Boolean,default:!0},type:{type:String,default:"center"},isMaskClick:{type:Boolean,default:null},maskClick:{type:Boolean,default:null},backgroundColor:{type:String,default:"none"},safeArea:{type:Boolean,default:!0},maskBackgroundColor:{type:String,default:"rgba(0, 0, 0, 0.4)"},borderRadius:{type:String}},watch:{type:{handler:function(t){this.config[t]&&this[this.config[t]](!0)},immediate:!0},isDesktop:{handler:function(t){this.config[t]&&this[this.config[this.type]](!0)},immediate:!0},maskClick:{handler:function(t){this.mkclick=t},immediate:!0},isMaskClick:{handler:function(t){this.mkclick=t},immediate:!0},showPopup(t){document.getElementsByTagName("body")[0].style.overflow=t?"hidden":"visible"}},data(){return{duration:300,ani:[],showPopup:!1,showTrans:!1,popupWidth:0,popupHeight:0,config:{top:"top",bottom:"bottom",center:"center",left:"left",right:"right",message:"top",dialog:"center",share:"bottom"},maskClass:{position:"fixed",bottom:0,top:0,left:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.4)"},transClass:{backgroundColor:"transparent",borderRadius:this.borderRadius||"0",position:"fixed",left:0,right:0},maskShow:!0,mkclick:!0,popupstyle:"top"}},computed:{getStyles(){let t={backgroundColor:this.bg};return this.borderRadius,t=Object.assign(t,{borderRadius:this.borderRadius}),t},isDesktop(){return this.popupWidth>=500&&this.popupHeight>=500},bg(){return""===this.backgroundColor||"none"===this.backgroundColor?"transparent":this.backgroundColor}},mounted(){(()=>{const{windowWidth:t,windowHeight:s,windowTop:i,safeArea:e,screenHeight:o,safeAreaInsets:a}=uni.getSystemInfoSync();this.popupWidth=t,this.popupHeight=s+(i||0),e&&this.safeArea?this.safeAreaInsets=a.bottom:this.safeAreaInsets=0})()},unmounted(){this.setH5Visible()},activated(){this.setH5Visible(!this.showPopup)},deactivated(){this.setH5Visible(!0)},created(){null===this.isMaskClick&&null===this.maskClick?this.mkclick=!0:this.mkclick=null!==this.isMaskClick?this.isMaskClick:this.maskClick,this.animation?this.duration=300:this.duration=0,this.messageChild=null,this.clearPropagation=!1,this.maskClass.backgroundColor=this.maskBackgroundColor},methods:{setH5Visible(t=!0){document.getElementsByTagName("body")[0].style.overflow=t?"visible":"hidden"},closeMask(){this.maskShow=!1},disableMask(){this.mkclick=!1},clear(t){t.stopPropagation(),this.clearPropagation=!0},open(t){if(this.showPopup)return;t&&-1!==["top","center","bottom","left","right","message","dialog","share"].indexOf(t)||(t=this.type),this.config[t]?(this[this.config[t]](),this.$emit("change",{show:!0,type:t})):console.error("缺少类型：",t)},close(t){this.showTrans=!1,this.$emit("change",{show:!1,type:this.type}),clearTimeout(this.timer),this.timer=setTimeout(()=>{this.showPopup=!1},300)},touchstart(){this.clearPropagation=!1},onTap(){this.clearPropagation?this.clearPropagation=!1:(this.$emit("maskClick"),this.mkclick&&this.close())},top(t){this.popupstyle=this.isDesktop?"fixforpc-top":"top",this.ani=["slide-top"],this.transClass={position:"fixed",left:0,right:0,backgroundColor:this.bg,borderRadius:this.borderRadius||"0"},t||(this.showPopup=!0,this.showTrans=!0,this.$nextTick(()=>{this.showPoptrans(),this.messageChild&&"message"===this.type&&this.messageChild.timerClose()}))},bottom(t){this.popupstyle="bottom",this.ani=["slide-bottom"],this.transClass={position:"fixed",left:0,right:0,bottom:0,paddingBottom:this.safeAreaInsets+"px",backgroundColor:this.bg,borderRadius:this.borderRadius||"0"},t||this.showPoptrans()},center(t){this.popupstyle="center",this.ani=["zoom-out","fade"],this.transClass={position:"fixed",display:"flex",flexDirection:"column",bottom:0,left:0,right:0,top:0,justifyContent:"center",alignItems:"center",borderRadius:this.borderRadius||"0"},t||this.showPoptrans()},left(t){this.popupstyle="left",this.ani=["slide-left"],this.transClass={position:"fixed",left:0,bottom:0,top:0,backgroundColor:this.bg,borderRadius:this.borderRadius||"0",display:"flex",flexDirection:"column"},t||this.showPoptrans()},right(t){this.popupstyle="right",this.ani=["slide-right"],this.transClass={position:"fixed",bottom:0,right:0,top:0,backgroundColor:this.bg,borderRadius:this.borderRadius||"0",display:"flex",flexDirection:"column"},t||this.showPoptrans()},showPoptrans(){this.$nextTick(()=>{this.showPopup=!0,this.showTrans=!0})}}},[["render",function(t,s,i,f,y,k){const b=d(c("uni-transition"),g),w=l,C=p("keypress");return y.showPopup?(e(),o(w,{key:0,class:r(["uni-popup",[y.popupstyle,k.isDesktop?"fixforpc-z-index":""]])},{default:a(()=>[u(w,{onTouchstart:k.touchstart},{default:a(()=>[y.maskShow?(e(),o(b,{key:"1",name:"mask","mode-class":"fade",styles:y.maskClass,duration:y.duration,show:y.showTrans,onClick:k.onTap},null,8,["styles","duration","show","onClick"])):m("",!0),u(b,{key:"2","mode-class":y.ani,name:"content",styles:y.transClass,duration:y.duration,show:y.showTrans,onClick:k.onTap},{default:a(()=>[u(w,{class:r(["uni-popup__wrapper",[y.popupstyle]]),style:h(k.getStyles),onClick:k.clear},{default:a(()=>[n(t.$slots,"default",{},void 0,!0)]),_:3},8,["style","class","onClick"])]),_:3},8,["mode-class","styles","duration","show","onClick"])]),_:3},8,["onTouchstart"]),y.maskShow?(e(),o(C,{key:0,onEsc:k.onTap},null,8,["onEsc"])):m("",!0)]),_:3},8,["class"])):m("",!0)}],["__scopeId","data-v-bfc381c5"]]);export{y as _};
|