app-drawer.ts

import { IModalData } from '@ibiz-template/runtime';
import Vue from 'vue';
import { AppDrawerOptions } from '@/interface';
import { AppDrawerComponent } from './app-drawer-component';
import { piniaInstance } from '@/store';

const PlacementMap: IData = {
  DRAWER_LEFT: 'left',
  DRAWER_RIGHT: 'right',
  DRAWER_TOP: 'top',
  DRAWER_BOTTOM: 'bottom',
};

export class AppDrawer {
  /**
   * 获取打开方式对应的placement
   *
   * @author lxm
   * @date 2022-09-15 17:09:46
   * @static
   * @param {string} openMode
   * @returns {*}  {AppDrawerOptions['placement']}
   */
  static getPlacement(openMode: string): AppDrawerOptions['placement'] {
    return PlacementMap[openMode] || 'right';
  }

  /**
   * 打开抽屉
   *
   * @author lxm
   * @date 2022-09-09 17:09:55
   * @static
   * @param {string} componentName 模态内部绘制组件名称
   * @param {IData} props 模态内部绘制组件的props
   * @param {AppDrawerOptions} [opts] 模态相关的配置参数
   * @returns {*}  {Promise<IModalData>}
   */
  static openDrawer(
    componentName: string,
    props: IData,
    opts?: AppDrawerOptions,
  ): Promise<IModalData> {
    return new Promise((resolve, reject) => {
      const vm = new Vue({
        pinia: piniaInstance,
        render(h) {
          return h(AppDrawerComponent, {
            props: {
              componentName,
              componentProps: props,
              opts,
              resolve,
              reject,
            },
          });
        },
      }).$mount();
      document.body.appendChild(vm.$el);
    });
  }
}