Dialog.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. import { createNamespace, addUnit } from '../utils';
  3. import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
  4. import { PopupMixin } from '../mixins/popup';
  5. import Button from '../button';
  6. import GoodsAction from '../goods-action';
  7. import GoodsActionButton from '../goods-action-button';
  8. var _createNamespace = createNamespace('dialog'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1],
  11. t = _createNamespace[2];
  12. export default createComponent({
  13. mixins: [PopupMixin()],
  14. props: {
  15. title: String,
  16. theme: String,
  17. width: [Number, String],
  18. message: String,
  19. className: null,
  20. callback: Function,
  21. beforeClose: Function,
  22. messageAlign: String,
  23. cancelButtonText: String,
  24. cancelButtonColor: String,
  25. confirmButtonText: String,
  26. confirmButtonColor: String,
  27. showCancelButton: Boolean,
  28. overlay: {
  29. type: Boolean,
  30. default: true
  31. },
  32. allowHtml: {
  33. type: Boolean,
  34. default: true
  35. },
  36. transition: {
  37. type: String,
  38. default: 'van-dialog-bounce'
  39. },
  40. showConfirmButton: {
  41. type: Boolean,
  42. default: true
  43. },
  44. closeOnPopstate: {
  45. type: Boolean,
  46. default: true
  47. },
  48. closeOnClickOverlay: {
  49. type: Boolean,
  50. default: false
  51. }
  52. },
  53. data: function data() {
  54. return {
  55. loading: {
  56. confirm: false,
  57. cancel: false
  58. }
  59. };
  60. },
  61. methods: {
  62. onClickOverlay: function onClickOverlay() {
  63. this.handleAction('overlay');
  64. },
  65. handleAction: function handleAction(action) {
  66. var _this = this;
  67. this.$emit(action); // show not trigger close event when hidden
  68. if (!this.value) {
  69. return;
  70. }
  71. if (this.beforeClose) {
  72. this.loading[action] = true;
  73. this.beforeClose(action, function (state) {
  74. if (state !== false && _this.loading[action]) {
  75. _this.onClose(action);
  76. }
  77. _this.loading.confirm = false;
  78. _this.loading.cancel = false;
  79. });
  80. } else {
  81. this.onClose(action);
  82. }
  83. },
  84. onClose: function onClose(action) {
  85. this.close();
  86. if (this.callback) {
  87. this.callback(action);
  88. }
  89. },
  90. onOpened: function onOpened() {
  91. this.$emit('opened');
  92. },
  93. onClosed: function onClosed() {
  94. this.$emit('closed');
  95. },
  96. genRoundButtons: function genRoundButtons() {
  97. var _this2 = this;
  98. var h = this.$createElement;
  99. return h(GoodsAction, {
  100. "class": bem('footer')
  101. }, [this.showCancelButton && h(GoodsActionButton, {
  102. "attrs": {
  103. "size": "large",
  104. "type": "warning",
  105. "text": this.cancelButtonText || t('cancel'),
  106. "color": this.cancelButtonColor,
  107. "loading": this.loading.cancel
  108. },
  109. "class": bem('cancel'),
  110. "on": {
  111. "click": function click() {
  112. _this2.handleAction('cancel');
  113. }
  114. }
  115. }), this.showConfirmButton && h(GoodsActionButton, {
  116. "attrs": {
  117. "size": "large",
  118. "type": "danger",
  119. "text": this.confirmButtonText || t('confirm'),
  120. "color": this.confirmButtonColor,
  121. "loading": this.loading.confirm
  122. },
  123. "class": bem('confirm'),
  124. "on": {
  125. "click": function click() {
  126. _this2.handleAction('confirm');
  127. }
  128. }
  129. })]);
  130. },
  131. genButtons: function genButtons() {
  132. var _this3 = this,
  133. _ref;
  134. var h = this.$createElement;
  135. var multiple = this.showCancelButton && this.showConfirmButton;
  136. return h("div", {
  137. "class": [BORDER_TOP, bem('footer')]
  138. }, [this.showCancelButton && h(Button, {
  139. "attrs": {
  140. "size": "large",
  141. "loading": this.loading.cancel,
  142. "text": this.cancelButtonText || t('cancel')
  143. },
  144. "class": bem('cancel'),
  145. "style": {
  146. color: this.cancelButtonColor
  147. },
  148. "on": {
  149. "click": function click() {
  150. _this3.handleAction('cancel');
  151. }
  152. }
  153. }), this.showConfirmButton && h(Button, {
  154. "attrs": {
  155. "size": "large",
  156. "loading": this.loading.confirm,
  157. "text": this.confirmButtonText || t('confirm')
  158. },
  159. "class": [bem('confirm'), (_ref = {}, _ref[BORDER_LEFT] = multiple, _ref)],
  160. "style": {
  161. color: this.confirmButtonColor
  162. },
  163. "on": {
  164. "click": function click() {
  165. _this3.handleAction('confirm');
  166. }
  167. }
  168. })]);
  169. },
  170. genContent: function genContent(hasTitle, messageSlot) {
  171. var h = this.$createElement;
  172. if (messageSlot) {
  173. return h("div", {
  174. "class": bem('content')
  175. }, [messageSlot]);
  176. }
  177. var message = this.message,
  178. messageAlign = this.messageAlign;
  179. if (message) {
  180. var _bem, _domProps;
  181. var data = {
  182. class: bem('message', (_bem = {
  183. 'has-title': hasTitle
  184. }, _bem[messageAlign] = messageAlign, _bem)),
  185. domProps: (_domProps = {}, _domProps[this.allowHtml ? 'innerHTML' : 'textContent'] = message, _domProps)
  186. };
  187. return h("div", {
  188. "class": bem('content', {
  189. isolated: !hasTitle
  190. })
  191. }, [h("div", _mergeJSXProps([{}, data]))]);
  192. }
  193. }
  194. },
  195. render: function render() {
  196. var h = arguments[0];
  197. if (!this.shouldRender) {
  198. return;
  199. }
  200. var message = this.message;
  201. var messageSlot = this.slots();
  202. var title = this.slots('title') || this.title;
  203. var Title = title && h("div", {
  204. "class": bem('header', {
  205. isolated: !message && !messageSlot
  206. })
  207. }, [title]);
  208. return h("transition", {
  209. "attrs": {
  210. "name": this.transition
  211. },
  212. "on": {
  213. "afterEnter": this.onOpened,
  214. "afterLeave": this.onClosed
  215. }
  216. }, [h("div", {
  217. "directives": [{
  218. name: "show",
  219. value: this.value
  220. }],
  221. "attrs": {
  222. "role": "dialog",
  223. "aria-labelledby": this.title || message
  224. },
  225. "class": [bem([this.theme]), this.className],
  226. "style": {
  227. width: addUnit(this.width)
  228. }
  229. }, [Title, this.genContent(title, messageSlot), this.theme === 'round-button' ? this.genRoundButtons() : this.genButtons()])]);
  230. }
  231. });