Package.svelte Modal

gopowerteam

基于Svelte 3的API式弹窗组件

安装(Install)

npm install @gopowerteam/svelte-modal --save
// OR
yarn add  @gopowerteam/svelte-modal

app.svelte

<template>
    <modal-provider>
        <router-view>
    </modal-provider>
</template>

<script lang="ts">
import { ModalProvider } from "@gopowerteam/Svelte-modal";

export default defineComponent({
  components: {
    ModalProvider,
  }
});
</script>

<style>
// 引入样式文件
// 在Svelte文件中引入
@import url('~@gopowerteam/svelte-modal/dist/style.css');

// 或在ts/js文件中引入
// import '@gopowerteam/svelte-modal/dist/style.css'
</style>

使用(Usage)

通过使用useModal获取modal对象,然后通过open方法即可打开弹窗.

import HelloWorld from "../components/HelloWorld.svelte";
import { useModal } from "@gopowerteam/svelte-modal";

export default defineComponent({
  components: {},
  setup() {
    const modal = useModal();

    function onClick() {
      modal
        .open({
          title: "弹窗标题",
          component: HelloWorld,
          props: {
            msg: "123",
          }
        })
        .then((a: any) => {});
    }

    return {
      onClick,
    };

API

open

打开弹窗

const modal = useModal()
modal.open(ModalOption)

ModalOption

Name	Type	Default:	Description
component	SvelteComponent	-	弹窗内容组件
props	Object	-	弹窗内容组件的props值
title	String	-	标题
header	Boolean	true	是否显示弹窗标题栏
closable	Boolean	true	是否显示窗口关闭按钮
maskClosable	Boolean	true	点击mask区域是否可以关闭弹窗
width	Number/String	-	窗口宽度

close

关闭弹窗

const modal = useModal()
modal.close()

在打开弹窗的组件页面执行modal.close即可关闭组件所在的弹窗页面

close的参数将作为回传数据进行返回

modal.close({result:true})

closeAll

关闭所有弹窗

const modal = useModal()
modal.closeAll()

补充

数据回传

modal.open返回对象为promise对象,通过then即可接收回传数据

const modal = useModal()
modal.open(ModalOption).then(data=>{
  // 处理回传数据
})

通过modal.close即可将数据进行回传

//open
modal.open(...).then(data=>{
  console.log(data) // {result:true}
})

// close
modal.close({result:true})

窗体最小宽度

窗体最小宽度可以在modal-provider上进行设置,默认为500px

<template>
<modal-provider :min-width="800">
  ...
</template>

Top categories