Dialog.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. import { createNamespace, addUnit, noop } 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. var _this2 = this;
  92. this.$emit('opened');
  93. this.$nextTick(function () {
  94. var _this2$$refs$dialog;
  95. (_this2$$refs$dialog = _this2.$refs.dialog) == null ? void 0 : _this2$$refs$dialog.focus();
  96. });
  97. },
  98. onClosed: function onClosed() {
  99. this.$emit('closed');
  100. },
  101. onKeydown: function onKeydown(event) {
  102. var _this3 = this;
  103. if (event.key === 'Escape' || event.key === 'Enter') {
  104. // skip keyboard events of child elements
  105. if (event.target !== this.$refs.dialog) {
  106. return;
  107. }
  108. var onEventType = {
  109. Enter: this.showConfirmButton ? function () {
  110. return _this3.handleAction('confirm');
  111. } : noop,
  112. Escape: this.showCancelButton ? function () {
  113. return _this3.handleAction('cancel');
  114. } : noop
  115. };
  116. onEventType[event.key]();
  117. this.$emit('keydown', event);
  118. }
  119. },
  120. genRoundButtons: function genRoundButtons() {
  121. var _this4 = this;
  122. var h = this.$createElement;
  123. return h(GoodsAction, {
  124. "class": bem('footer')
  125. }, [this.showCancelButton && h(GoodsActionButton, {
  126. "attrs": {
  127. "size": "large",
  128. "type": "warning",
  129. "text": this.cancelButtonText || t('cancel'),
  130. "color": this.cancelButtonColor,
  131. "loading": this.loading.cancel
  132. },
  133. "class": bem('cancel'),
  134. "on": {
  135. "click": function click() {
  136. _this4.handleAction('cancel');
  137. }
  138. }
  139. }), this.showConfirmButton && h(GoodsActionButton, {
  140. "attrs": {
  141. "size": "large",
  142. "type": "danger",
  143. "text": this.confirmButtonText || t('confirm'),
  144. "color": this.confirmButtonColor,
  145. "loading": this.loading.confirm
  146. },
  147. "class": bem('confirm'),
  148. "on": {
  149. "click": function click() {
  150. _this4.handleAction('confirm');
  151. }
  152. }
  153. })]);
  154. },
  155. genButtons: function genButtons() {
  156. var _this5 = this,
  157. _ref;
  158. var h = this.$createElement;
  159. var multiple = this.showCancelButton && this.showConfirmButton;
  160. return h("div", {
  161. "class": [BORDER_TOP, bem('footer')]
  162. }, [this.showCancelButton && h(Button, {
  163. "attrs": {
  164. "size": "large",
  165. "loading": this.loading.cancel,
  166. "text": this.cancelButtonText || t('cancel'),
  167. "nativeType": "button"
  168. },
  169. "class": bem('cancel'),
  170. "style": {
  171. color: this.cancelButtonColor
  172. },
  173. "on": {
  174. "click": function click() {
  175. _this5.handleAction('cancel');
  176. }
  177. }
  178. }), this.showConfirmButton && h(Button, {
  179. "attrs": {
  180. "size": "large",
  181. "loading": this.loading.confirm,
  182. "text": this.confirmButtonText || t('confirm'),
  183. "nativeType": "button"
  184. },
  185. "class": [bem('confirm'), (_ref = {}, _ref[BORDER_LEFT] = multiple, _ref)],
  186. "style": {
  187. color: this.confirmButtonColor
  188. },
  189. "on": {
  190. "click": function click() {
  191. _this5.handleAction('confirm');
  192. }
  193. }
  194. })]);
  195. },
  196. genContent: function genContent(hasTitle, messageSlot) {
  197. var h = this.$createElement;
  198. if (messageSlot) {
  199. return h("div", {
  200. "class": bem('content')
  201. }, [messageSlot]);
  202. }
  203. var message = this.message,
  204. messageAlign = this.messageAlign;
  205. if (message) {
  206. var _bem, _domProps;
  207. var data = {
  208. class: bem('message', (_bem = {
  209. 'has-title': hasTitle
  210. }, _bem[messageAlign] = messageAlign, _bem)),
  211. domProps: (_domProps = {}, _domProps[this.allowHtml ? 'innerHTML' : 'textContent'] = message, _domProps)
  212. };
  213. return h("div", {
  214. "class": bem('content', {
  215. isolated: !hasTitle
  216. })
  217. }, [h("div", _mergeJSXProps([{}, data]))]);
  218. }
  219. }
  220. },
  221. render: function render() {
  222. var h = arguments[0];
  223. if (!this.shouldRender) {
  224. return;
  225. }
  226. var message = this.message;
  227. var messageSlot = this.slots();
  228. var title = this.slots('title') || this.title;
  229. var Title = title && h("div", {
  230. "class": bem('header', {
  231. isolated: !message && !messageSlot
  232. })
  233. }, [title]);
  234. return h("transition", {
  235. "attrs": {
  236. "name": this.transition
  237. },
  238. "on": {
  239. "afterEnter": this.onOpened,
  240. "afterLeave": this.onClosed
  241. }
  242. }, [h("div", {
  243. "directives": [{
  244. name: "show",
  245. value: this.value
  246. }],
  247. "attrs": {
  248. "role": "dialog",
  249. "aria-labelledby": this.title || message,
  250. "tabIndex": 0
  251. },
  252. "class": [bem([this.theme]), this.className],
  253. "style": {
  254. width: addUnit(this.width)
  255. },
  256. "ref": "dialog",
  257. "on": {
  258. "keydown": this.onKeydown
  259. }
  260. }, [Title, this.genContent(title, messageSlot), this.theme === 'round-button' ? this.genRoundButtons() : this.genButtons()])]);
  261. }
  262. });