svelte-layer 基于svelte.js网页pc端弹窗组件

前几天有给大家分享一个 svelte+sass实战微信app界面聊天实例
今天要给大家分享的是全新研发的svelte.js自定义桌面版对话框组件SvelteLayer。

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

引入svelte-layer组件

弹窗组件支持组件式(Layer)+函数式(svLayer)两种调用方式。

import Layer, {svLayer} from '$lib/Layer'

• 函数式写法

function handleInfo(e) {
    let el = svLayer({
        title: '标题',
        content: `

            
函数式调用：svLayer({...})
        
`,
        resize: true,
        btns: [
            {
                text: '取消',
                click: () => {
                    // 关闭弹窗
                    el.$set({open: false})
                }
            },
            {
                text: '确认',
                style: 'color:#09f;',
                click: () => {
                    svLayer({
                        type: 'toast',
                        icon: 'loading',
                        content: '加载中...',
                        opacity: .2,
                        time: 2
                    })
                }
            },
        ]
    })
}

• 组件式写法

 showConfirm=false},
        {text: '确定', style: 'color:#e63d23;', click: handleInfo},
    ]}
/>

两种写法可以单独使用，如果是一些复杂的弹窗场景，可考虑两种写法混合调用。

svelte-layer配置参数

支持如下超过30+参数随意搭配调用。

弹窗模板及js逻辑处理模块。

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

        {#if title}
{@html title}
{/if}
        {#if icon&&type=='toast'}
{@html toastIcon[icon]}
{/if}
        

            
            {#if $$slots.content}
                

            {:else}
                {#if content}
                    
                    {#if type=='iframe'}
                    

                        
                    
                    
                    {:else if type=='message' || type=='notify' || type=='popover'}
                    

                        {#if icon}{@html messageIcon[icon]}{/if}
                        

                            {#if title}
{@html title}
{/if}
                            
{@html content}
                        
                    
                    
                    {:else if type == 'component'}
                    
                    {:else}
                    
{@html content}
                    {/if}
                {/if}
            {/if}
            
        

        
        {#if btns}
        

            {#each btns as btn,index}
                {@html btn.text}
            {/each}
        
        {/if}

        {#if xclose}
        
        {/if}
        {#if maximize}{/if}
        
        {#if resize}
        
            
            
            
            
        
        {/if}
    
    
    

另外svelte-layer还支持动态引入外部组件。

import Counter from '$lib/Counter.svelte'

// 动态加载组件(函数式调用)
function showComponentLayer() {
    svLayer({
        type: 'component',
        title: '动态加载组件',
        content: Counter,
        resize: true,
        xclose: true,
        maximize: true,
        area: ['360px', '250px']
    })
}


 showComponent=false},
    ]}
    on:open={handleOpen} on:close={handleClose}
>
    
        
    

另外还封装了类似element-ui种message/notify/popover弹窗类型。

/**
 * Message提示消息
 * @param {object} options
 * @param {string} icon图标(info/success/error/warning/loading)
 */
svLayer.message = function(options) {
    typeof options == 'string' && (options = {content: options})
    return svLayer({
        icon: 'info',
        anim: 'fadeInUp',
        position: 't',
        lockScroll: false,
        shade: false,
        time: 2,
        layerStyle: 'margin-top: 10px',
        ...options,
        title: null,
        type: 'message'
    })
}

/**
 * Notification通知消息
 * @param {object} options
 * @param {string} icon图标(info/success/error/warning/loading)
 */
svLayer.notify = function(options) {
    typeof options == 'string' && (options = {content: options})
    return svLayer({
        anim: 'fadeInRight',
        position: 'rt',
        lockScroll: false,
        shade: false,
        xclose: true,
        time: 5,
        layerStyle: 'margin: 20px 0 0 -20px',
        ...options,
        type: 'notify'
    })
}

/**
 * Popover气泡框
 * @param {object} options
 * @param {string} icon图标(info/success/error/warning/loading)
 */
svLayer.popover = function(options) {
    return svLayer({
        anim: 'fadeIn',
        lockScroll: false,
        shade: false,
        xclose: true,
        ...options,
        type: 'popover'
    })
}

好了，以上就是svelte.js开发自定义pc端弹窗插件的一些分享。后续还会分享一些svelte自定义组件及实战案例项目。