Modal Componet For Svelte 3

基于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>