Toast.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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 _lockClick = require("./lock-click");
  7. var _popup = require("../mixins/popup");
  8. var _icon = _interopRequireDefault(require("../icon"));
  9. var _loading = _interopRequireDefault(require("../loading"));
  10. // Utils
  11. // Mixins
  12. // Components
  13. var _createNamespace = (0, _utils.createNamespace)('toast'),
  14. createComponent = _createNamespace[0],
  15. bem = _createNamespace[1];
  16. var _default = createComponent({
  17. mixins: [(0, _popup.PopupMixin)()],
  18. props: {
  19. icon: String,
  20. className: null,
  21. iconPrefix: String,
  22. loadingType: String,
  23. forbidClick: Boolean,
  24. closeOnClick: Boolean,
  25. message: [Number, String],
  26. type: {
  27. type: String,
  28. default: 'text'
  29. },
  30. position: {
  31. type: String,
  32. default: 'middle'
  33. },
  34. transition: {
  35. type: String,
  36. default: 'van-fade'
  37. },
  38. lockScroll: {
  39. type: Boolean,
  40. default: false
  41. }
  42. },
  43. data: function data() {
  44. return {
  45. clickable: false
  46. };
  47. },
  48. mounted: function mounted() {
  49. this.toggleClickable();
  50. },
  51. destroyed: function destroyed() {
  52. this.toggleClickable();
  53. },
  54. watch: {
  55. value: 'toggleClickable',
  56. forbidClick: 'toggleClickable'
  57. },
  58. methods: {
  59. onClick: function onClick() {
  60. if (this.closeOnClick) {
  61. this.close();
  62. }
  63. },
  64. toggleClickable: function toggleClickable() {
  65. var clickable = this.value && this.forbidClick;
  66. if (this.clickable !== clickable) {
  67. this.clickable = clickable;
  68. (0, _lockClick.lockClick)(clickable);
  69. }
  70. },
  71. /* istanbul ignore next */
  72. onAfterEnter: function onAfterEnter() {
  73. this.$emit('opened');
  74. if (this.onOpened) {
  75. this.onOpened();
  76. }
  77. },
  78. onAfterLeave: function onAfterLeave() {
  79. this.$emit('closed');
  80. },
  81. genIcon: function genIcon() {
  82. var h = this.$createElement;
  83. var icon = this.icon,
  84. type = this.type,
  85. iconPrefix = this.iconPrefix,
  86. loadingType = this.loadingType;
  87. var hasIcon = icon || type === 'success' || type === 'fail';
  88. if (hasIcon) {
  89. return h(_icon.default, {
  90. "class": bem('icon'),
  91. "attrs": {
  92. "classPrefix": iconPrefix,
  93. "name": icon || type
  94. }
  95. });
  96. }
  97. if (type === 'loading') {
  98. return h(_loading.default, {
  99. "class": bem('loading'),
  100. "attrs": {
  101. "type": loadingType
  102. }
  103. });
  104. }
  105. },
  106. genMessage: function genMessage() {
  107. var h = this.$createElement;
  108. var type = this.type,
  109. message = this.message;
  110. if (!(0, _utils.isDef)(message) || message === '') {
  111. return;
  112. }
  113. if (type === 'html') {
  114. return h("div", {
  115. "class": bem('text'),
  116. "domProps": {
  117. "innerHTML": message
  118. }
  119. });
  120. }
  121. return h("div", {
  122. "class": bem('text')
  123. }, [message]);
  124. }
  125. },
  126. render: function render() {
  127. var _ref;
  128. var h = arguments[0];
  129. return h("transition", {
  130. "attrs": {
  131. "name": this.transition
  132. },
  133. "on": {
  134. "afterEnter": this.onAfterEnter,
  135. "afterLeave": this.onAfterLeave
  136. }
  137. }, [h("div", {
  138. "directives": [{
  139. name: "show",
  140. value: this.value
  141. }],
  142. "class": [bem([this.position, (_ref = {}, _ref[this.type] = !this.icon, _ref)]), this.className],
  143. "on": {
  144. "click": this.onClick
  145. }
  146. }, [this.genIcon(), this.genMessage()])]);
  147. }
  148. });
  149. exports.default = _default;