index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var touch_1 = require('../mixins/touch');
  5. var utils_1 = require('../common/utils');
  6. var THRESHOLD = 0.3;
  7. var ARRAY = [];
  8. component_1.VantComponent({
  9. props: {
  10. disabled: Boolean,
  11. leftWidth: {
  12. type: Number,
  13. value: 0,
  14. observer: function (leftWidth) {
  15. if (leftWidth === void 0) {
  16. leftWidth = 0;
  17. }
  18. if (this.offset > 0) {
  19. this.swipeMove(leftWidth);
  20. }
  21. },
  22. },
  23. rightWidth: {
  24. type: Number,
  25. value: 0,
  26. observer: function (rightWidth) {
  27. if (rightWidth === void 0) {
  28. rightWidth = 0;
  29. }
  30. if (this.offset < 0) {
  31. this.swipeMove(-rightWidth);
  32. }
  33. },
  34. },
  35. asyncClose: Boolean,
  36. name: {
  37. type: [Number, String],
  38. value: '',
  39. },
  40. },
  41. mixins: [touch_1.touch],
  42. data: {
  43. catchMove: false,
  44. },
  45. created: function () {
  46. this.offset = 0;
  47. ARRAY.push(this);
  48. },
  49. destroyed: function () {
  50. var _this = this;
  51. ARRAY = ARRAY.filter(function (item) {
  52. return item !== _this;
  53. });
  54. },
  55. methods: {
  56. open: function (position) {
  57. var _a = this.data,
  58. leftWidth = _a.leftWidth,
  59. rightWidth = _a.rightWidth;
  60. var offset = position === 'left' ? leftWidth : -rightWidth;
  61. this.swipeMove(offset);
  62. this.$emit('open', {
  63. position: position,
  64. name: this.data.name,
  65. });
  66. },
  67. close: function () {
  68. this.swipeMove(0);
  69. },
  70. swipeMove: function (offset) {
  71. if (offset === void 0) {
  72. offset = 0;
  73. }
  74. this.offset = utils_1.range(
  75. offset,
  76. -this.data.rightWidth,
  77. this.data.leftWidth
  78. );
  79. var transform = 'translate3d(' + this.offset + 'px, 0, 0)';
  80. var transition = this.dragging
  81. ? 'none'
  82. : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  83. this.setData({
  84. wrapperStyle:
  85. '\n -webkit-transform: ' +
  86. transform +
  87. ';\n -webkit-transition: ' +
  88. transition +
  89. ';\n transform: ' +
  90. transform +
  91. ';\n transition: ' +
  92. transition +
  93. ';\n ',
  94. });
  95. },
  96. swipeLeaveTransition: function () {
  97. var _a = this.data,
  98. leftWidth = _a.leftWidth,
  99. rightWidth = _a.rightWidth;
  100. var offset = this.offset;
  101. if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
  102. this.open('right');
  103. } else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
  104. this.open('left');
  105. } else {
  106. this.swipeMove(0);
  107. }
  108. this.setData({ catchMove: false });
  109. },
  110. startDrag: function (event) {
  111. if (this.data.disabled) {
  112. return;
  113. }
  114. this.startOffset = this.offset;
  115. this.touchStart(event);
  116. },
  117. noop: function () {},
  118. onDrag: function (event) {
  119. var _this = this;
  120. if (this.data.disabled) {
  121. return;
  122. }
  123. this.touchMove(event);
  124. if (this.direction !== 'horizontal') {
  125. return;
  126. }
  127. this.dragging = true;
  128. ARRAY.filter(function (item) {
  129. return item !== _this;
  130. }).forEach(function (item) {
  131. return item.close();
  132. });
  133. this.setData({ catchMove: true });
  134. this.swipeMove(this.startOffset + this.deltaX);
  135. },
  136. endDrag: function () {
  137. if (this.data.disabled) {
  138. return;
  139. }
  140. this.dragging = false;
  141. this.swipeLeaveTransition();
  142. },
  143. onClick: function (event) {
  144. var _a = event.currentTarget.dataset.key,
  145. position = _a === void 0 ? 'outside' : _a;
  146. this.$emit('click', position);
  147. if (!this.offset) {
  148. return;
  149. }
  150. if (this.data.asyncClose) {
  151. this.$emit('close', {
  152. position: position,
  153. instance: this,
  154. name: this.data.name,
  155. });
  156. } else {
  157. this.swipeMove(0);
  158. }
  159. },
  160. },
  161. });