index.ts 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import Dialog from './index.vue';
  2. import { render, createVNode, h } from 'vue';
  3. export class DialogOptions {
  4. title?: string = '';
  5. content?: string = '';
  6. cancelText?: string = '取消';
  7. okText?: string = '确定';
  8. textAlign?: string = 'center';
  9. teleport?: String = 'body';
  10. // function
  11. onUpdate?: Function = (value: boolean) => {};
  12. onOk?: Function = () => {};
  13. onCancel?: Function = () => {};
  14. onClose?: Function = () => {};
  15. onClosed?: Function = () => {};
  16. visible?: boolean = true;
  17. noFooter?: boolean = false;
  18. noOkBtn?: boolean = false;
  19. noCancelBtn?: boolean = false;
  20. okBtnDisabled?: boolean = false;
  21. closeOnPopstate?: boolean = false;
  22. lockScroll?: boolean = false;
  23. }
  24. class DialogFunction {
  25. options: DialogOptions = new DialogOptions();
  26. constructor(_options: DialogOptions) {
  27. let options = Object.assign(this.options, _options);
  28. const root = document.createElement('view');
  29. root.id = 'dialog-' + new Date().getTime();
  30. const Wrapper = {
  31. setup() {
  32. options.onUpdate = (val: boolean) => {
  33. if (val == false) {
  34. document.body.removeChild(root);
  35. }
  36. };
  37. options.teleport = `#${root.id}`;
  38. return () => {
  39. return h(Dialog, options);
  40. };
  41. }
  42. };
  43. const instance: any = createVNode(Wrapper);
  44. document.body.appendChild(root);
  45. render(instance, root);
  46. }
  47. close = () => {
  48. // if (instance) {
  49. // instance.component.ctx.close();
  50. // }
  51. };
  52. setDefaultOptions = (options: DialogOptions) => {
  53. // Object.assign(this.currentOptions, options);
  54. };
  55. resetDefaultOptions = () => {
  56. // Dialog.currentOptions = { ...Dialog.defaultOptions };
  57. };
  58. }
  59. const _Dialog = function(options: DialogOptions) {
  60. return new DialogFunction(options);
  61. };
  62. _Dialog.install = (app: any) => {
  63. app.use(Dialog);
  64. app.config.globalProperties.$dialog = _Dialog;
  65. };
  66. export { Dialog };
  67. export default _Dialog;