index.js 2.4KB

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