Dialog.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _utils = require("../utils");
  6. var _popup = require("../mixins/popup");
  7. var _button = _interopRequireDefault(require("../button"));
  8. var _use = (0, _utils.use)('dialog'),
  9. sfc = _use[0],
  10. bem = _use[1],
  11. t = _use[2];
  12. var _default = sfc({
  13. mixins: [_popup.PopupMixin],
  14. props: {
  15. title: String,
  16. message: String,
  17. className: null,
  18. callback: Function,
  19. beforeClose: Function,
  20. messageAlign: String,
  21. cancelButtonText: String,
  22. cancelButtonColor: String,
  23. confirmButtonText: String,
  24. confirmButtonColor: String,
  25. showCancelButton: Boolean,
  26. showConfirmButton: {
  27. type: Boolean,
  28. "default": true
  29. },
  30. overlay: {
  31. type: Boolean,
  32. "default": true
  33. },
  34. closeOnClickOverlay: {
  35. type: Boolean,
  36. "default": false
  37. }
  38. },
  39. data: function data() {
  40. return {
  41. loading: {
  42. confirm: false,
  43. cancel: false
  44. }
  45. };
  46. },
  47. methods: {
  48. onClickOverlay: function onClickOverlay() {
  49. this.handleAction('overlay');
  50. },
  51. handleAction: function handleAction(action) {
  52. var _this = this;
  53. this.$emit(action);
  54. if (this.beforeClose) {
  55. this.loading[action] = true;
  56. this.beforeClose(action, function (state) {
  57. if (state !== false) {
  58. _this.onClose(action);
  59. }
  60. _this.loading[action] = false;
  61. });
  62. } else {
  63. this.onClose(action);
  64. }
  65. },
  66. onClose: function onClose(action) {
  67. this.close();
  68. if (this.callback) {
  69. this.callback(action);
  70. }
  71. }
  72. },
  73. render: function render(h) {
  74. var _bem,
  75. _this2 = this;
  76. if (!this.shouldRender) {
  77. return;
  78. }
  79. var title = this.title,
  80. message = this.message,
  81. messageAlign = this.messageAlign;
  82. var children = this.slots();
  83. var Title = title && h("div", {
  84. "class": bem('header', {
  85. isolated: !message && !children
  86. })
  87. }, [title]);
  88. var Content = (children || message) && h("div", {
  89. "class": bem('content')
  90. }, [children || h("div", {
  91. "domProps": {
  92. "innerHTML": message
  93. },
  94. "class": bem('message', (_bem = {
  95. 'has-title': title
  96. }, _bem[messageAlign] = messageAlign, _bem))
  97. })]);
  98. var hasButtons = this.showCancelButton && this.showConfirmButton;
  99. var ButtonGroup = h("div", {
  100. "class": ['van-hairline--top', bem('footer', {
  101. buttons: hasButtons
  102. })]
  103. }, [this.showCancelButton && h(_button["default"], {
  104. "attrs": {
  105. "size": "large",
  106. "loading": this.loading.cancel,
  107. "text": this.cancelButtonText || t('cancel')
  108. },
  109. "class": bem('cancel'),
  110. "style": {
  111. color: this.cancelButtonColor
  112. },
  113. "on": {
  114. "click": function click() {
  115. _this2.handleAction('cancel');
  116. }
  117. }
  118. }), this.showConfirmButton && h(_button["default"], {
  119. "attrs": {
  120. "size": "large",
  121. "loading": this.loading.confirm,
  122. "text": this.confirmButtonText || t('confirm')
  123. },
  124. "class": [bem('confirm'), {
  125. 'van-hairline--left': hasButtons
  126. }],
  127. "style": {
  128. color: this.confirmButtonColor
  129. },
  130. "on": {
  131. "click": function click() {
  132. _this2.handleAction('confirm');
  133. }
  134. }
  135. })]);
  136. return h("transition", {
  137. "attrs": {
  138. "name": "van-dialog-bounce"
  139. }
  140. }, [h("div", {
  141. "directives": [{
  142. name: "show",
  143. value: this.value
  144. }],
  145. "class": [bem(), this.className]
  146. }, [Title, Content, ButtonGroup])]);
  147. }
  148. });
  149. exports["default"] = _default;