Dialog.js 6.7 KB

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