前两天有给大家分享一个 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'}{/if}
{#if $$slots.content}
一开始开发的时候只支持组件式调用。想着如果能支持函数式调用(插入组件至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还是挺不错的，尤其编译运行够快，体积够小。不过唯一有点遗憾的是还没有找到类似vue全局引入组件的方法。