Svelte如何创建适用于移动端的自定义弹窗Popup组件？

本文共计1891个文字，预计阅读时间需要8分钟。

基于Svelte 3.x，自定义多功能svPopup弹出框组件（组件式+函数式）。前几天分享了Svelte自定义tabbar、navbar组件，今天继续带来Svelte自定义弹出框组件。svPopup：一款基于Svelte.js开发的手机端弹出框组件。

基于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是函数式调用。