index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import { VantComponent } from '../common/component';
  2. import { button } from '../mixins/button';
  3. import { openType } from '../mixins/open-type';
  4. import { GRAY, RED } from '../common/color';
  5. VantComponent({
  6. mixins: [button, openType],
  7. props: {
  8. show: {
  9. type: Boolean,
  10. observer(show) {
  11. !show && this.stopLoading();
  12. },
  13. },
  14. title: String,
  15. message: String,
  16. theme: {
  17. type: String,
  18. value: 'default',
  19. },
  20. useSlot: Boolean,
  21. className: String,
  22. customStyle: String,
  23. asyncClose: Boolean,
  24. messageAlign: String,
  25. overlayStyle: String,
  26. useTitleSlot: Boolean,
  27. showCancelButton: Boolean,
  28. closeOnClickOverlay: Boolean,
  29. confirmButtonOpenType: String,
  30. width: null,
  31. zIndex: {
  32. type: Number,
  33. value: 2000,
  34. },
  35. confirmButtonText: {
  36. type: String,
  37. value: '确认',
  38. },
  39. cancelButtonText: {
  40. type: String,
  41. value: '取消',
  42. },
  43. confirmButtonColor: {
  44. type: String,
  45. value: RED,
  46. },
  47. cancelButtonColor: {
  48. type: String,
  49. value: GRAY,
  50. },
  51. showConfirmButton: {
  52. type: Boolean,
  53. value: true,
  54. },
  55. overlay: {
  56. type: Boolean,
  57. value: true,
  58. },
  59. transition: {
  60. type: String,
  61. value: 'scale',
  62. },
  63. },
  64. data: {
  65. loading: {
  66. confirm: false,
  67. cancel: false,
  68. },
  69. },
  70. methods: {
  71. onConfirm() {
  72. this.handleAction('confirm');
  73. },
  74. onCancel() {
  75. this.handleAction('cancel');
  76. },
  77. onClickOverlay() {
  78. this.onClose('overlay');
  79. },
  80. handleAction(action) {
  81. if (this.data.asyncClose) {
  82. this.setData({
  83. [`loading.${action}`]: true,
  84. });
  85. }
  86. this.onClose(action);
  87. },
  88. close() {
  89. this.setData({
  90. show: false,
  91. });
  92. },
  93. stopLoading() {
  94. this.setData({
  95. loading: {
  96. confirm: false,
  97. cancel: false,
  98. },
  99. });
  100. },
  101. onClose(action) {
  102. if (!this.data.asyncClose) {
  103. // this.close();
  104. }
  105. this.$emit('close', action);
  106. // 把 dialog 实例传递出去,可以通过 stopLoading() 在外部关闭按钮的 loading
  107. this.$emit(action, { dialog: this });
  108. const callback = this.data[
  109. action === 'confirm' ? 'onConfirm' : 'onCancel'
  110. ];
  111. if (callback) {
  112. callback(this);
  113. }
  114. },
  115. },
  116. });