index.js 7.7 KB

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