@gopowerteam/vue-modal v0.1.17

Modal Componet For Vue 3

基于Vue 3的API式弹窗组件

安装(Install)

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

App.vue

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

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

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

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

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

使用(Usage)

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

import HelloWorld from "../components/HelloWorld.vue";
import { useModal } from "@gopowerteam/vue-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

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>