Dialog.js 3.5 KB

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