index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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 _event = require("../utils/event");
  7. var _touch = require("../mixins/touch");
  8. var _scroll = require("../utils/scroll");
  9. var _loading = _interopRequireDefault(require("../loading"));
  10. var _use = (0, _utils.use)('pull-refresh'),
  11. sfc = _use[0],
  12. bem = _use[1],
  13. t = _use[2];
  14. var TEXT_STATUS = ['pulling', 'loosing', 'success'];
  15. var _default = sfc({
  16. mixins: [_touch.TouchMixin],
  17. props: {
  18. disabled: Boolean,
  19. successText: String,
  20. pullingText: String,
  21. loosingText: String,
  22. loadingText: String,
  23. value: {
  24. type: Boolean,
  25. required: true
  26. },
  27. successDuration: {
  28. type: Number,
  29. "default": 500
  30. },
  31. animationDuration: {
  32. type: Number,
  33. "default": 300
  34. },
  35. headHeight: {
  36. type: Number,
  37. "default": 50
  38. }
  39. },
  40. data: function data() {
  41. return {
  42. status: 'normal',
  43. height: 0,
  44. duration: 0
  45. };
  46. },
  47. computed: {
  48. untouchable: function untouchable() {
  49. return this.status === 'loading' || this.status === 'success' || this.disabled;
  50. }
  51. },
  52. watch: {
  53. value: function value(loading) {
  54. var _this = this;
  55. this.duration = this.animationDuration;
  56. if (!loading && this.successText) {
  57. this.status = 'success';
  58. setTimeout(function () {
  59. _this.setStatus(0);
  60. }, this.successDuration);
  61. } else {
  62. this.setStatus(loading ? this.headHeight : 0, loading);
  63. }
  64. }
  65. },
  66. mounted: function mounted() {
  67. this.scrollEl = (0, _scroll.getScrollEventTarget)(this.$el);
  68. },
  69. methods: {
  70. onTouchStart: function onTouchStart(event) {
  71. if (!this.untouchable && this.getCeiling()) {
  72. this.duration = 0;
  73. this.touchStart(event);
  74. }
  75. },
  76. onTouchMove: function onTouchMove(event) {
  77. if (this.untouchable) {
  78. return;
  79. }
  80. this.touchMove(event);
  81. if (!this.ceiling && this.getCeiling()) {
  82. this.duration = 0;
  83. this.startY = event.touches[0].clientY;
  84. this.deltaY = 0;
  85. }
  86. if (this.ceiling && this.deltaY >= 0) {
  87. if (this.direction === 'vertical') {
  88. this.setStatus(this.ease(this.deltaY));
  89. (0, _event.preventDefault)(event);
  90. }
  91. }
  92. },
  93. onTouchEnd: function onTouchEnd() {
  94. if (!this.untouchable && this.ceiling && this.deltaY) {
  95. this.duration = this.animationDuration;
  96. if (this.status === 'loosing') {
  97. this.setStatus(this.headHeight, true);
  98. this.$emit('input', true);
  99. this.$emit('refresh');
  100. } else {
  101. this.setStatus(0);
  102. }
  103. }
  104. },
  105. getCeiling: function getCeiling() {
  106. this.ceiling = (0, _scroll.getScrollTop)(this.scrollEl) === 0;
  107. return this.ceiling;
  108. },
  109. ease: function ease(height) {
  110. var headHeight = this.headHeight;
  111. return height < headHeight ? height : height < headHeight * 2 ? Math.round(headHeight + (height - headHeight) / 2) : Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4);
  112. },
  113. setStatus: function setStatus(height, isLoading) {
  114. this.height = height;
  115. var status = isLoading ? 'loading' : height === 0 ? 'normal' : height < this.headHeight ? 'pulling' : 'loosing';
  116. if (status !== this.status) {
  117. this.status = status;
  118. }
  119. }
  120. },
  121. render: function render(h) {
  122. var status = this.status;
  123. var text = this[status + "Text"] || t(status);
  124. var style = {
  125. transition: this.duration + "ms",
  126. transform: this.height ? "translate3d(0," + this.height + "px, 0)" : ''
  127. };
  128. var Status = this.slots(status) || [TEXT_STATUS.indexOf(status) !== -1 && h("div", {
  129. "class": bem('text')
  130. }, [text]), status === 'loading' && h("div", {
  131. "class": bem('loading')
  132. }, [h(_loading["default"]), h("span", [text])])];
  133. return h("div", {
  134. "class": bem()
  135. }, [h("div", {
  136. "class": bem('track'),
  137. "style": style,
  138. "on": {
  139. "touchstart": this.onTouchStart,
  140. "touchmove": this.onTouchMove,
  141. "touchend": this.onTouchEnd,
  142. "touchcancel": this.onTouchEnd
  143. }
  144. }, [h("div", {
  145. "class": bem('head')
  146. }, [Status]), this.slots()])]);
  147. }
  148. });
  149. exports["default"] = _default;