svelte组件:svelte3自定义桌面PC端对话框组件svelte-layer
阅读原文时间:2022年04月18日阅读:1

基于Svelte3.x开发pc网页版自定义弹窗组件svelteLayer

svelte-layer:基于svelte.js轻量级多功能pc桌面端对话框组件。支持多种弹窗类型、30+参数随意组合配置,整合了拖拽/四周缩放/最大化/记忆弹窗位置/全屏/自定义层级等功能。

svelteLayer功能效果上有些类似layer.js插件。

◆ 快速引入

在需要使用组件功能的页面,引入组件。

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

svelteLayer支持标签式+函数式两种调用方式。

  • 标签式调用


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

  • 函数式调用

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
})
}
},
]
})
}

支持标签式和函数式混合搭配调用,还支持如上图动态加载外部组件。

◆ 参数配置

svelte-layer默认支持如下参数自定义配置。

弹窗模板及核心逻辑处理。

{#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还支持类型为 message | notify | popover 弹窗。

svLayer.message({})
svLayer.notify({})
svLayer.popover({})

调用方式如上,只支持函数式调用。

svelte-layer支持自定义拖拽区域 drag: '#header' ,是否拖拽到窗口外 dragOut: true 。还支持iframe弹窗类型 type: 'iframe' ,配置 topmost: true 即可让当前活动窗口保持置顶状态。

该组件还有一大亮点,就是支持动态引入外部组件。

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}


OK,基于Svelte.js开发pc端弹窗组件就分享到这里。希望对大家有一些帮助~

最后附上一个svelte3+svelteKit聊天实例项目

svelte3.x+sass仿微信app聊天:https://www.cnblogs.com/xiaoyan2017/p/16110203.html