index.ts 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { ref } from "vue";
  2. import reDialog from "./index.vue";
  3. import { useTimeoutFn } from "@vueuse/core";
  4. import { withInstall } from "@pureadmin/utils";
  5. import type {
  6. EventType,
  7. ArgsType,
  8. DialogProps,
  9. ButtonProps,
  10. DialogOptions
  11. } from "./type";
  12. const dialogStore = ref<Array<DialogOptions>>([]);
  13. /** 打开弹框 */
  14. const addDialog = (options: DialogOptions) => {
  15. const open = () =>
  16. dialogStore.value.push(Object.assign(options, { visible: true }));
  17. if (options?.openDelay) {
  18. useTimeoutFn(() => {
  19. open();
  20. }, options.openDelay);
  21. } else {
  22. open();
  23. }
  24. };
  25. /** 关闭弹框 */
  26. const closeDialog = (options: DialogOptions, index: number, args?: any) => {
  27. dialogStore.value[index].visible = false;
  28. options.closeCallBack && options.closeCallBack({ options, index, args });
  29. const closeDelay = options?.closeDelay ?? 200;
  30. useTimeoutFn(() => {
  31. dialogStore.value.splice(index, 1);
  32. }, closeDelay);
  33. };
  34. /**
  35. * @description 更改弹框自身属性值
  36. * @param value 属性值
  37. * @param key 属性,默认`title`
  38. * @param index 弹框索引(默认`0`,代表只有一个弹框,对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`)
  39. */
  40. const updateDialog = (value: any, key = "title", index = 0) => {
  41. dialogStore.value[index][key] = value;
  42. };
  43. /** 关闭所有弹框 */
  44. const closeAllDialog = () => {
  45. dialogStore.value = [];
  46. };
  47. /** 千万别忘了在下面这三处引入并注册下,放心注册,不使用`addDialog`调用就不会被挂载
  48. * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
  49. * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
  50. * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
  51. */
  52. const ReDialog = withInstall(reDialog);
  53. export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
  54. export {
  55. ReDialog,
  56. dialogStore,
  57. addDialog,
  58. closeDialog,
  59. updateDialog,
  60. closeAllDialog
  61. };