index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import { VantComponent } from '../common/component';
  2. import { button } from '../mixins/button';
  3. import { GRAY, RED } from '../common/color';
  4. import { toPromise } from '../common/utils';
  5. VantComponent({
  6. mixins: [button],
  7. classes: ['cancle-button-class', 'confirm-button-class'],
  8. props: {
  9. show: {
  10. type: Boolean,
  11. observer(show) {
  12. !show && this.stopLoading();
  13. },
  14. },
  15. title: String,
  16. message: String,
  17. theme: {
  18. type: String,
  19. value: 'default',
  20. },
  21. confirmButtonId: String,
  22. className: String,
  23. customStyle: String,
  24. asyncClose: Boolean,
  25. messageAlign: String,
  26. beforeClose: null,
  27. overlayStyle: String,
  28. useSlot: Boolean,
  29. useTitleSlot: Boolean,
  30. useConfirmButtonSlot: Boolean,
  31. useCancelButtonSlot: Boolean,
  32. showCancelButton: Boolean,
  33. closeOnClickOverlay: Boolean,
  34. confirmButtonOpenType: String,
  35. width: null,
  36. zIndex: {
  37. type: Number,
  38. value: 2000,
  39. },
  40. confirmButtonText: {
  41. type: String,
  42. value: '确认',
  43. },
  44. cancelButtonText: {
  45. type: String,
  46. value: '取消',
  47. },
  48. confirmButtonColor: {
  49. type: String,
  50. value: RED,
  51. },
  52. cancelButtonColor: {
  53. type: String,
  54. value: GRAY,
  55. },
  56. showConfirmButton: {
  57. type: Boolean,
  58. value: true,
  59. },
  60. overlay: {
  61. type: Boolean,
  62. value: true,
  63. },
  64. transition: {
  65. type: String,
  66. value: 'scale',
  67. },
  68. rootPortal: {
  69. type: Boolean,
  70. value: false,
  71. },
  72. },
  73. data: {
  74. loading: {
  75. confirm: false,
  76. cancel: false,
  77. },
  78. callback: (() => { }),
  79. },
  80. methods: {
  81. onConfirm() {
  82. this.handleAction('confirm');
  83. },
  84. onCancel() {
  85. this.handleAction('cancel');
  86. },
  87. onClickOverlay() {
  88. this.close('overlay');
  89. },
  90. close(action) {
  91. this.setData({ show: false });
  92. this.closeAction = action;
  93. },
  94. onAfterLeave() {
  95. const { closeAction: action } = this;
  96. this.$emit('close', action);
  97. const { callback } = this.data;
  98. if (callback) {
  99. callback(action, this);
  100. }
  101. },
  102. stopLoading() {
  103. this.setData({
  104. loading: {
  105. confirm: false,
  106. cancel: false,
  107. },
  108. });
  109. },
  110. handleAction(action) {
  111. this.$emit(action, { dialog: this });
  112. const { asyncClose, beforeClose } = this.data;
  113. if (!asyncClose && !beforeClose) {
  114. this.close(action);
  115. return;
  116. }
  117. this.setData({
  118. [`loading.${action}`]: true,
  119. });
  120. if (beforeClose) {
  121. toPromise(beforeClose(action)).then((value) => {
  122. if (value) {
  123. this.close(action);
  124. }
  125. else {
  126. this.stopLoading();
  127. }
  128. });
  129. }
  130. },
  131. },
  132. });