svelte-popup是基于svelte.js的移动端弹窗组件

时间：2023-03-31 14:24:34 vue.js

前两天给大家分享了一个svelte的自定义Tabbar+Navbar组件。今天给大家带来的是新开发的svelte自定义移动端模态框组件SveltePopup。如下图所示：在lib目录下创建Popup组件目录。svelte-popup组件介绍弹窗组件支持两种调用方式：组件（Popup）+函数（svPopup）。importPopup,{svPopup}from'$lib/Popup'组件调用isShowDialog=false},]}on:open={handleOpen}on:close={handleClose}>

自定义槽显示内容

函数调用letel=svPopup({title:'标题信息',content:'显示内容信息

',xclose:true,shadeClose:false,btns:[{text:'Cancel',click:()=>{el.$set({open:false})}},{text:'Confirm',style:'color:#f90;',click:()=>handleOK},],onOpen:()=>{},onClose:()=>{}})一些简单的弹出-up效果通过函数调用更方便。对于一些功能丰富的弹出式显示，您可以使用基于组件的插槽来自定义插槽。确认框（此处是确认框提示信息，这里是确认框提示信息，这里是确认框提示信息)

"btns={[{text:'Cancel',click:()=>showConfirm=false},{text:'OK',style:'color:#e63d23;',click:handleInfo},]}/>null},{text:'Cancel',style:'color:#a9a9a9;',click:()=>showFooter=false},]}/>null},{text:'Cancel',click:()=>showActionSheet=false},]}/>showActionPicker=false},{text:'OK',style:'color:#00e0a1;',click:()=>null},]}>

背包

鞋子

运动裤

还支持函数式多层混合方式CallfunctionhandleInfo(e){console.log(e)console.log('通过函数调用弹窗...')letel=svPopup({title:'Title',content:`

函数调用：svPopup({...})

`,btns:[{text:'Cancel',click:()=>{//关闭弹窗el.$set({open:false})}},{text:'Confirm',style:'color:#09f;'，点击:()=>{svPopup({type:'toast',icon:'loading',content:'Loading...',opacity:.2,time:2})}},]})}以及支持组件式和函数式混合调用。svelte-popup参数配置支持以下20+参数混合调用。弹窗模板及js处理部分{#ifbool(阴影)

{/if}

{#iftitle}{@htmltitle}