yann-popup

介绍

以函数式创建弹窗

使用说明

<template>
  <Popup />
</template>

import { definePopup, Popup } from 'yann-popup';
import PopupComponent from './component/index.vue';

// 使用方式 1 定义弹窗生成函数
const createPopupFn = definePopup(PopupComponent);
// CloseFn 直接卸载弹窗
// createPopupFn 可以接受三个参数，
// 第一个是 PopupComponent 组件的 props，
// 第二参数 PopupComponent 组件 slots，
// 第三个参数是 配置项
const CloseFn = createPopupFn({});

// 使用方式 2 指定节点 也可以再生成弹窗函数内传递
const createPopupFn = definePopup(PopupComponent, {
  to: 'body'
});
const CloseFn = createPopupFn({});

// 使用方式 3 beforeCloseFn执行后不直接卸载
//  仅驱动内部 modelValue 为 false
//  需要弹窗执行 emit('eventClose') 才会卸载弹窗
const createPopupFn = definePopup(PopupComponent, {
  isUnload: false
});
const beforeCloseFn = createPopupFn({});

// 使用方式 4 添加自定义插槽
const createPopupFn = definePopup(PopupComponent)
const CloseFn = createPopupFn({...}, {
  default: defineAsyncComponent(() => import('./test/index.vue')),
  header:{
    component : defineAsyncComponent(() => import('./test/header.vue')),
    props: {
      title: 'title'
    }
  }
})

// 使用方式 5 createPopup 内置的弹窗函数
import { createPopup } from 'yann-popup';
const close = createPopup({
  // element-plus的dialog组件的属性
}, {
  // element-plus的dialog组件的插槽
})


// 使用方式 6 defineClosePopup 定义关闭函数 不传参数时表示关闭最后生成的弹窗
const close = defineClosePopup()
if(close){
  //
  close()
}

// 使用方式 7 defineClosePopup 定义指定 id 的关闭函数
import { createPopup, defineClosePopup } from 'yann-popup';
const close = createPopup({
  // element-plus的dialog组件的属性
}, {
  // element-plus的dialog组件的插槽
},{
  id: 2
})

const close = defineClosePopup(2)
close()

类型说明

interface DefineProps {
  [key: string]: any;
}

interface DefineOption {
  to?: string;
  isUnload?: boolean;
}

interface DefineId {
  id?: string | number | Symbol;
}

interface DefineSlots {
  [key: string]: {
    component: AnyVueComponent;
    props: DefineProps;
  };
}

interface DefineSlotsSimple {
  [key: string]: AnyVueComponent;
}

type CreatePopup = (
  props?: DefineProps,
  slots?: DefineSlots | DefineSlotsSimple,
  option?: DefineOption & DefineId
) => () => void;

export declare function definePopup(
  component: AnyVueComponent,
  initOption?: DefineOption
): CreatePopup;

declare function defineClosePopup(
  id?: string | number | Symbol
): (() => void) | undefined;