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

前两天有给大家分享一个 svelte自定义Tabbar+Navbar组件。
今天给大家带来的是最新开发的svelte自定义手机端模态框组件SveltePopup。

如下图：在lib目录下新建一个Popup组件目录。

文章图片

引入svelte-popup组件
弹窗组件支持组件式(Popup)+函数式(svPopup)两种调用方式。

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

组件式调用

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

函数式调用

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

一些简单的弹窗效果通过函数调用更加方便，对于一些功能丰富的弹窗展示，可以使用组件式slot自定义插槽方式展示。

文章图片

showConfirm=false}, {text: '确定', style: 'color:#e63d23; ', click: handleInfo}, ]} /> null}, {text: '取消', style: 'color:#a9a9a9; ', click: () => showFooter=false}, ]} /> null}, {text: '取消', click: () => showActionSheet=false}, ]} /> showActionPicker=false}, {text: '确定', style: 'color:#00e0a1; ', click: () => null}, ]} > 双肩包鞋子运动裤

还支持函数式多层混合方式调用。

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-popup参数配置
支持如下 20+ 参数混合调用。

弹窗模板及js处理部分。

{#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 */

一开始开发的时候只支持组件式调用。想着如果能支持函数式调用(插入组件至body，关闭即移除)就好了。
后来在svelte官网发现 new Component 可以传入 props 参数，试了下，发现果然可以实现这种效果。
const component = new Component(options)
如下是官网给的例子
https://svelte.dev/docs#run-t...

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

于是新建一个popup.js。

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-popup|svelte-popup 基于svelte.js移动端弹窗组件】通过一系列的学习，发现svelte还是挺不错的，尤其编译运行够快，体积够小。不过唯一有点遗憾的是还没有找到类似vue全局引入组件的方法。