index.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _utils = require("../utils");
  5. var _event = require("../utils/event");
  6. var _touch = require("../mixins/touch");
  7. var _use = (0, _utils.use)('swipe'),
  8. sfc = _use[0],
  9. bem = _use[1];
  10. var _default = sfc({
  11. mixins: [_touch.TouchMixin],
  12. props: {
  13. width: Number,
  14. height: Number,
  15. autoplay: Number,
  16. vertical: Boolean,
  17. initialSwipe: Number,
  18. indicatorColor: String,
  19. loop: {
  20. type: Boolean,
  21. "default": true
  22. },
  23. touchable: {
  24. type: Boolean,
  25. "default": true
  26. },
  27. showIndicators: {
  28. type: Boolean,
  29. "default": true
  30. },
  31. duration: {
  32. type: Number,
  33. "default": 500
  34. }
  35. },
  36. data: function data() {
  37. return {
  38. computedWidth: 0,
  39. computedHeight: 0,
  40. offset: 0,
  41. active: 0,
  42. deltaX: 0,
  43. deltaY: 0,
  44. swipes: [],
  45. swiping: false
  46. };
  47. },
  48. mounted: function mounted() {
  49. this.initialize();
  50. if (!this.$isServer) {
  51. (0, _event.on)(window, 'resize', this.onResize, true);
  52. }
  53. },
  54. activated: function activated() {
  55. if (this.rendered) {
  56. this.initialize();
  57. }
  58. this.rendered = true;
  59. },
  60. destroyed: function destroyed() {
  61. this.clear();
  62. if (!this.$isServer) {
  63. (0, _event.off)(window, 'resize', this.onResize, true);
  64. }
  65. },
  66. watch: {
  67. swipes: function swipes() {
  68. this.initialize();
  69. },
  70. initialSwipe: function initialSwipe() {
  71. this.initialize();
  72. },
  73. autoplay: function autoplay(_autoplay) {
  74. if (!_autoplay) {
  75. this.clear();
  76. } else {
  77. this.autoPlay();
  78. }
  79. }
  80. },
  81. computed: {
  82. count: function count() {
  83. return this.swipes.length;
  84. },
  85. delta: function delta() {
  86. return this.vertical ? this.deltaY : this.deltaX;
  87. },
  88. size: function size() {
  89. return this[this.vertical ? 'computedHeight' : 'computedWidth'];
  90. },
  91. trackSize: function trackSize() {
  92. return this.count * this.size;
  93. },
  94. activeIndicator: function activeIndicator() {
  95. return (this.active + this.count) % this.count;
  96. },
  97. isCorrectDirection: function isCorrectDirection() {
  98. var expect = this.vertical ? 'vertical' : 'horizontal';
  99. return this.direction === expect;
  100. },
  101. trackStyle: function trackStyle() {
  102. var _ref;
  103. var mainAxis = this.vertical ? 'height' : 'width';
  104. var crossAxis = this.vertical ? 'width' : 'height';
  105. return _ref = {}, _ref[mainAxis] = this.trackSize + "px", _ref[crossAxis] = this[crossAxis] ? this[crossAxis] + "px" : '', _ref.transitionDuration = (this.swiping ? 0 : this.duration) + "ms", _ref.transform = "translate" + (this.vertical ? 'Y' : 'X') + "(" + this.offset + "px)", _ref;
  106. },
  107. indicatorStyle: function indicatorStyle() {
  108. return {
  109. backgroundColor: this.indicatorColor
  110. };
  111. }
  112. },
  113. methods: {
  114. // initialize swipe position
  115. initialize: function initialize(active) {
  116. if (active === void 0) {
  117. active = this.initialSwipe;
  118. }
  119. clearTimeout(this.timer);
  120. if (this.$el) {
  121. var rect = this.$el.getBoundingClientRect();
  122. this.computedWidth = this.width || rect.width;
  123. this.computedHeight = this.height || rect.height;
  124. }
  125. this.swiping = true;
  126. this.active = active;
  127. this.offset = this.count > 1 ? -this.size * this.active : 0;
  128. this.swipes.forEach(function (swipe) {
  129. swipe.offset = 0;
  130. });
  131. this.autoPlay();
  132. },
  133. onResize: function onResize() {
  134. this.initialize(this.activeIndicator);
  135. },
  136. onTouchStart: function onTouchStart(event) {
  137. if (!this.touchable) return;
  138. this.clear();
  139. this.swiping = true;
  140. this.touchStart(event);
  141. this.correctPosition();
  142. },
  143. onTouchMove: function onTouchMove(event) {
  144. if (!this.touchable || !this.swiping) return;
  145. this.touchMove(event);
  146. if (this.isCorrectDirection) {
  147. (0, _event.preventDefault)(event, true);
  148. this.move({
  149. offset: Math.min(Math.max(this.delta, -this.size), this.size)
  150. });
  151. }
  152. },
  153. onTouchEnd: function onTouchEnd() {
  154. if (!this.touchable || !this.swiping) return;
  155. if (this.delta && this.isCorrectDirection) {
  156. var offset = this.vertical ? this.offsetY : this.offsetX;
  157. this.move({
  158. pace: offset > 0 ? this.delta > 0 ? -1 : 1 : 0,
  159. emitChange: true
  160. });
  161. }
  162. this.swiping = false;
  163. this.autoPlay();
  164. },
  165. move: function move(_ref2) {
  166. var _ref2$pace = _ref2.pace,
  167. pace = _ref2$pace === void 0 ? 0 : _ref2$pace,
  168. _ref2$offset = _ref2.offset,
  169. offset = _ref2$offset === void 0 ? 0 : _ref2$offset,
  170. emitChange = _ref2.emitChange;
  171. var delta = this.delta,
  172. active = this.active,
  173. count = this.count,
  174. swipes = this.swipes,
  175. trackSize = this.trackSize;
  176. var atFirst = active === 0;
  177. var atLast = active === count - 1;
  178. var outOfBounds = !this.loop && (atFirst && (offset > 0 || pace < 0) || atLast && (offset < 0 || pace > 0));
  179. if (outOfBounds || count <= 1) {
  180. return;
  181. }
  182. if (swipes[0]) {
  183. swipes[0].offset = atLast && (delta < 0 || pace > 0) ? trackSize : 0;
  184. }
  185. if (swipes[count - 1]) {
  186. swipes[count - 1].offset = atFirst && (delta > 0 || pace < 0) ? -trackSize : 0;
  187. }
  188. if (pace && active + pace >= -1 && active + pace <= count) {
  189. this.active += pace;
  190. if (emitChange) {
  191. this.$emit('change', this.activeIndicator);
  192. }
  193. }
  194. this.offset = Math.round(offset - this.active * this.size);
  195. },
  196. swipeTo: function swipeTo(index) {
  197. var _this = this;
  198. this.swiping = true;
  199. this.resetTouchStatus();
  200. this.correctPosition();
  201. setTimeout(function () {
  202. _this.swiping = false;
  203. _this.move({
  204. pace: index % _this.count - _this.active,
  205. emitChange: true
  206. });
  207. }, 30);
  208. },
  209. correctPosition: function correctPosition() {
  210. if (this.active <= -1) {
  211. this.move({
  212. pace: this.count
  213. });
  214. }
  215. if (this.active >= this.count) {
  216. this.move({
  217. pace: -this.count
  218. });
  219. }
  220. },
  221. clear: function clear() {
  222. clearTimeout(this.timer);
  223. },
  224. autoPlay: function autoPlay() {
  225. var _this2 = this;
  226. var autoplay = this.autoplay;
  227. if (autoplay && this.count > 1) {
  228. this.clear();
  229. this.timer = setTimeout(function () {
  230. _this2.swiping = true;
  231. _this2.resetTouchStatus();
  232. _this2.correctPosition();
  233. setTimeout(function () {
  234. _this2.swiping = false;
  235. _this2.move({
  236. pace: 1,
  237. emitChange: true
  238. });
  239. _this2.autoPlay();
  240. }, 30);
  241. }, autoplay);
  242. }
  243. }
  244. },
  245. render: function render(h) {
  246. var _this3 = this;
  247. var count = this.count,
  248. activeIndicator = this.activeIndicator;
  249. var Indicator = this.slots('indicator') || this.showIndicators && count > 1 && h("div", {
  250. "class": bem('indicators', {
  251. vertical: this.vertical
  252. })
  253. }, [Array.apply(void 0, Array(count)).map(function (empty, index) {
  254. return h("i", {
  255. "class": bem('indicator', {
  256. active: index === activeIndicator
  257. }),
  258. "style": index === activeIndicator ? _this3.indicatorStyle : null
  259. });
  260. })]);
  261. return h("div", {
  262. "class": bem()
  263. }, [h("div", {
  264. "ref": "track",
  265. "style": this.trackStyle,
  266. "class": bem('track'),
  267. "on": {
  268. "touchstart": this.onTouchStart,
  269. "touchmove": this.onTouchMove,
  270. "touchend": this.onTouchEnd,
  271. "touchcancel": this.onTouchEnd
  272. }
  273. }, [this.slots()]), Indicator]);
  274. }
  275. });
  276. exports["default"] = _default;