Toast.js 3.4 KB

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