Content.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createNamespace } from '../utils';
  3. import { TouchMixin } from '../mixins/touch';
  4. var _createNamespace = createNamespace('tabs'),
  5. createComponent = _createNamespace[0],
  6. bem = _createNamespace[1];
  7. var MIN_SWIPE_DISTANCE = 50;
  8. export default createComponent({
  9. mixins: [TouchMixin],
  10. props: {
  11. count: Number,
  12. duration: [Number, String],
  13. animated: Boolean,
  14. swipeable: Boolean,
  15. currentIndex: Number
  16. },
  17. computed: {
  18. style: function style() {
  19. if (this.animated) {
  20. return {
  21. transform: "translate3d(" + -1 * this.currentIndex * 100 + "%, 0, 0)",
  22. transitionDuration: this.duration + "s"
  23. };
  24. }
  25. },
  26. listeners: function listeners() {
  27. if (this.swipeable) {
  28. return {
  29. touchstart: this.touchStart,
  30. touchmove: this.touchMove,
  31. touchend: this.onTouchEnd,
  32. touchcancel: this.onTouchEnd
  33. };
  34. }
  35. }
  36. },
  37. methods: {
  38. // watch swipe touch end
  39. onTouchEnd: function onTouchEnd() {
  40. var direction = this.direction,
  41. deltaX = this.deltaX,
  42. currentIndex = this.currentIndex;
  43. /* istanbul ignore else */
  44. if (direction === 'horizontal' && this.offsetX >= MIN_SWIPE_DISTANCE) {
  45. /* istanbul ignore else */
  46. if (deltaX > 0 && currentIndex !== 0) {
  47. this.$emit('change', currentIndex - 1);
  48. } else if (deltaX < 0 && currentIndex !== this.count - 1) {
  49. this.$emit('change', currentIndex + 1);
  50. }
  51. }
  52. },
  53. genChildren: function genChildren() {
  54. var h = this.$createElement;
  55. if (this.animated) {
  56. return h("div", {
  57. "class": bem('track'),
  58. "style": this.style
  59. }, [this.slots()]);
  60. }
  61. return this.slots();
  62. }
  63. },
  64. render: function render() {
  65. var h = arguments[0];
  66. return h("div", {
  67. "class": bem('content', {
  68. animated: this.animated
  69. }),
  70. "on": _extends({}, this.listeners)
  71. }, [this.genChildren()]);
  72. }
  73. });