svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
阅读原文时间:2022年03月17日阅读:1

基于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来实现功能。



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: \`<div style="padding:20px;">  
        <p>函数式调用:<em style="color:#999;">svPopup({...})</em></p>

    </div>\`,  
    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}

/**
* @Desc svelte自定义多功能弹框组件
* @Time andy by 2022/3/15
* @About Q:282310962 wx: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

通过如上写法,就可以导出一个 Popup 组件及 svPopup 函数调用。

OK,以上就是svelte实现自定义弹窗组件的一些分享,希望对大家有所帮助~~

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章