svelte组件（Svelte自定义弹窗Popup组件|svelte组件：Svelte自定义弹窗Popup组件|svelte移动端弹框组件） svelte组件：Svelte自定义弹窗P

基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式)
前几天有分享一个svelte自定义tabbar+navbar组件，今天继续带来svelte自定义弹窗组件。
svPopup 一款基于 Svelte.js 开发的手机端弹框组件。汇集了msg、info、toast、alert、dialog、actionsheet等多种类型弹窗。支持 25+ 参数自定义搭配组合、组件式+函数式两种调用方式。

由于svelte框架比较新，一些相关的项目案例及自定义组件例子比较少，只能看官方语法文档，并结合之前开发的一些vue3弹窗插件，最后实现了如上图所示的svelte自定义弹框。
◆ 引入组件
在需要使用弹窗功能的页面引入Popup组件。

import Popup, {svPopup} from '$lib/Popup'

其中 Popup 是组件式调用， svPopup 是函数式调用。

组件式写法

isVisibleDialog=false}, ]} on:open={handleOpen} on:close={handleClose} > 自定义插槽显示插槽内容！！！

函数式写法

let el = svPopup({ title: '标题信息', content: '这里是内容信息
', xclose: true, xposition: 'top', shadeClose: false, btns: [ {text: '取消', click: () => { el.$set({open: false}) }}, {text: '确认', style: 'color:#f90; ', click: () => handleOK}, ], onOpen: () => {}, onClose: () => {} })

一些简单的弹窗效果可以使用函数式调用，一些复杂的交互功能可以使用组件式自定义slot来实现功能。

文章图片

温馨提示" zIndex="6666" content="是否检查软件更新并下载最新的更新？通过移动网络下载可能产生额外的费用。如果可能，通过WLAN网络下载。" btns={[ {text: '稍后提示', style: 'color:#2196f3; ', click: () => null}, {text: '取消', style: 'color:#a9a9a9; ', click: () => showMulityBtns=false}, {text: '立即更新', style: 'color:#00e0a1; ', click: handleInfo}, ]} />

文章图片

null}, {text: '取消', style: 'color:#a9a9a9; ', click: () => showFooter=false}, ]} /> null}, {text: '取消', click: () => showActionSheet=false}, ]} />

文章图片

showIos1=false}, {text: '确定', style: 'color:#00e0a1; ', click: handleInfo}, ]} > showAndroid1=false}, {text: '确定', style: 'color:#00e0a1; ', click: handleInfo}, ]} >

function handleInfo(e) { console.log(e) console.log('通过函数方式调用弹窗...')let el = svPopup({ title: '标题', content: `函数式调用：svPopup({...})
`, btns: [ { text: '取消', click: () => { // 关闭弹窗 el.$set({open: false}) } }, { text: '确认', style: 'color:#09f; ', click: () => { svPopup({ type: 'toast', icon: 'loading', content: '加载中...', opacity: .2, time: 2 }) } }, ] }) }

文章图片

◆ Svelte弹窗编码实现

支持如下参数自定义配置

弹窗模板语法

{#if bool(shade)}
{/if}

{#if title}
{@html title}
{/if} {#if icon&&type=='toast'}
{@html toastIcon[icon]}
{/if} {#if $$slots.content}
{:else} {#if content}
{@html content}
{/if} {/if} {#if btns}
{#each btns as btn,index} btnClicked(e, index)}>{@html btn.text} {/each}
{/if} {#if xclose}{/if}

/** * @Descsvelte自定义多功能弹框组件 * @Timeandy by 2022/3/15 * @AboutQ：282310962wx：xy190310 */

Svelte官网有介绍，可以通过 new Component 来实现挂载组件到body上。
const component = new Component(options)

import App from './App.svelte'; const app = new App({ target: document.body, props: { // assuming App.svelte contains something like // `export let answer`: answer: 42 } });

https://svelte.dev/docs#run-time-client-side-component-api

文章图片

import Popup from './Popup.svelte'let uuid = function() { return 'svpopup-' + Math.floor(Math.random() * 10000) }export function svPopup(options = {}) { options.id = uuid()const mountNode = document.createElement('div') document.body.appendChild(mountNode)const app = new Popup({ target: mountNode, props: { ...options, open: true, // 传入函数移除指令 remove() { document.body.removeChild(mountNode) } } }) return app }export default Popup

【svelte组件（Svelte自定义弹窗Popup组件|svelte组件：Svelte自定义弹窗Popup组件|svelte移动端弹框组件）】通过如上写法，就可以导出一个 Popup 组件及 svPopup 函数调用。