index.js 2.3 KB

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