Toast.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { use, isDef } from '../utils';
  2. import { PopupMixin } from '../mixins/popup';
  3. import Icon from '../icon';
  4. import Loading from '../loading';
  5. var _use = use('toast'),
  6. sfc = _use[0],
  7. bem = _use[1];
  8. var STYLE = ['success', 'fail', 'loading'];
  9. export default sfc({
  10. mixins: [PopupMixin],
  11. props: {
  12. className: null,
  13. forbidClick: Boolean,
  14. message: [String, Number],
  15. type: {
  16. type: String,
  17. "default": 'text'
  18. },
  19. loadingType: {
  20. type: String,
  21. "default": 'circular'
  22. },
  23. position: {
  24. type: String,
  25. "default": 'middle'
  26. },
  27. lockScroll: {
  28. type: Boolean,
  29. "default": false
  30. }
  31. },
  32. data: function data() {
  33. return {
  34. clickable: false
  35. };
  36. },
  37. mounted: function mounted() {
  38. this.toggleClickale();
  39. },
  40. destroyed: function destroyed() {
  41. this.toggleClickale();
  42. },
  43. watch: {
  44. value: function value() {
  45. this.toggleClickale();
  46. },
  47. forbidClick: function forbidClick() {
  48. this.toggleClickale();
  49. }
  50. },
  51. methods: {
  52. toggleClickale: function toggleClickale() {
  53. var clickable = this.value && this.forbidClick;
  54. if (this.clickable !== clickable) {
  55. this.clickable = clickable;
  56. var action = clickable ? 'add' : 'remove';
  57. document.body.classList[action]('van-toast--unclickable');
  58. }
  59. }
  60. },
  61. render: function render(h) {
  62. var _this = this;
  63. var type = this.type,
  64. message = this.message;
  65. var style = STYLE.indexOf(type) !== -1 ? 'default' : type;
  66. var Content = function Content() {
  67. switch (style) {
  68. case 'text':
  69. return h("div", [message]);
  70. case 'html':
  71. return h("div", {
  72. "domProps": {
  73. "innerHTML": message
  74. }
  75. });
  76. default:
  77. return [type === 'loading' ? h(Loading, {
  78. "attrs": {
  79. "color": "white",
  80. "type": _this.loadingType
  81. }
  82. }) : h(Icon, {
  83. "class": bem('icon'),
  84. "attrs": {
  85. "name": type
  86. }
  87. }), isDef(message) && h("div", {
  88. "class": bem('text')
  89. }, [message])];
  90. }
  91. };
  92. return h("transition", {
  93. "attrs": {
  94. "name": "van-fade"
  95. }
  96. }, [h("div", {
  97. "directives": [{
  98. name: "show",
  99. value: this.value
  100. }],
  101. "class": [bem([style, this.position]), this.className]
  102. }, [Content()])]);
  103. }
  104. });