index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import { VantComponent } from '../common/component';
  2. import { touch } from '../mixins/touch';
  3. var THRESHOLD = 0.15;
  4. VantComponent({
  5. props: {
  6. disabled: Boolean,
  7. leftWidth: {
  8. type: Number,
  9. value: 0
  10. },
  11. rightWidth: {
  12. type: Number,
  13. value: 0
  14. },
  15. asyncClose: Boolean
  16. },
  17. mixins: [touch],
  18. data: {
  19. offset: 0,
  20. draging: false
  21. },
  22. computed: {
  23. wrapperStyle: function wrapperStyle() {
  24. var _this$data = this.data,
  25. offset = _this$data.offset,
  26. draging = _this$data.draging;
  27. var transform = "translate3d(" + offset + "px, 0, 0)";
  28. var transition = draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  29. return "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n ";
  30. }
  31. },
  32. methods: {
  33. onTransitionend: function onTransitionend() {
  34. this.swipe = false;
  35. },
  36. open: function open(position) {
  37. var _this$data2 = this.data,
  38. leftWidth = _this$data2.leftWidth,
  39. rightWidth = _this$data2.rightWidth;
  40. var offset = position === 'left' ? leftWidth : -rightWidth;
  41. this.swipeMove(offset);
  42. this.resetSwipeStatus();
  43. },
  44. close: function close() {
  45. this.set({
  46. offset: 0
  47. });
  48. },
  49. resetSwipeStatus: function resetSwipeStatus() {
  50. this.swiping = false;
  51. this.opened = true;
  52. },
  53. swipeMove: function swipeMove(offset) {
  54. if (offset === void 0) {
  55. offset = 0;
  56. }
  57. this.set({
  58. offset: offset
  59. });
  60. offset && (this.swiping = true);
  61. !offset && (this.opened = false);
  62. },
  63. swipeLeaveTransition: function swipeLeaveTransition(direction) {
  64. var _this$data3 = this.data,
  65. offset = _this$data3.offset,
  66. leftWidth = _this$data3.leftWidth,
  67. rightWidth = _this$data3.rightWidth;
  68. var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; // right
  69. if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) {
  70. this.open('right'); // left
  71. } else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) {
  72. this.open('left');
  73. } else {
  74. this.swipeMove();
  75. }
  76. },
  77. startDrag: function startDrag(event) {
  78. if (this.data.disabled) {
  79. return;
  80. }
  81. this.set({
  82. draging: true
  83. });
  84. this.touchStart(event);
  85. if (this.opened) {
  86. this.startX -= this.data.offset;
  87. }
  88. },
  89. onDrag: function onDrag(event) {
  90. if (this.data.disabled) {
  91. return;
  92. }
  93. this.touchMove(event);
  94. var deltaX = this.deltaX;
  95. var _this$data4 = this.data,
  96. leftWidth = _this$data4.leftWidth,
  97. rightWidth = _this$data4.rightWidth;
  98. if (deltaX < 0 && (-deltaX > rightWidth || !rightWidth) || deltaX > 0 && (deltaX > leftWidth || deltaX > 0 && !leftWidth)) {
  99. return;
  100. }
  101. if (this.direction === 'horizontal') {
  102. this.swipeMove(deltaX);
  103. }
  104. },
  105. endDrag: function endDrag() {
  106. if (this.data.disabled) {
  107. return;
  108. }
  109. this.set({
  110. draging: false
  111. });
  112. if (this.swiping) {
  113. this.swipeLeaveTransition(this.data.offset > 0 ? -1 : 1);
  114. }
  115. },
  116. onClick: function onClick(event) {
  117. var _event$currentTarget$ = event.currentTarget.dataset.key,
  118. position = _event$currentTarget$ === void 0 ? 'outside' : _event$currentTarget$;
  119. this.$emit('click', position);
  120. if (!this.data.offset) {
  121. return;
  122. }
  123. if (this.data.asyncClose) {
  124. this.$emit('close', {
  125. position: position,
  126. instance: this
  127. });
  128. } else {
  129. this.swipeMove(0);
  130. }
  131. }
  132. }
  133. });