index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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: null,
  38. value: '',
  39. },
  40. },
  41. mixins: [touch_1.touch],
  42. data: {
  43. catchMove: false,
  44. wrapperStyle: '',
  45. },
  46. created: function () {
  47. this.offset = 0;
  48. ARRAY.push(this);
  49. },
  50. destroyed: function () {
  51. var _this = this;
  52. ARRAY = ARRAY.filter(function (item) {
  53. return item !== _this;
  54. });
  55. },
  56. methods: {
  57. open: function (position) {
  58. var _a = this.data,
  59. leftWidth = _a.leftWidth,
  60. rightWidth = _a.rightWidth;
  61. var offset = position === 'left' ? leftWidth : -rightWidth;
  62. this.swipeMove(offset);
  63. this.$emit('open', {
  64. position: position,
  65. name: this.data.name,
  66. });
  67. },
  68. close: function () {
  69. this.swipeMove(0);
  70. },
  71. swipeMove: function (offset) {
  72. if (offset === void 0) {
  73. offset = 0;
  74. }
  75. this.offset = utils_1.range(
  76. offset,
  77. -this.data.rightWidth,
  78. this.data.leftWidth
  79. );
  80. var transform = 'translate3d(' + this.offset + 'px, 0, 0)';
  81. var transition = this.dragging
  82. ? 'none'
  83. : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  84. this.setData({
  85. wrapperStyle:
  86. '\n -webkit-transform: ' +
  87. transform +
  88. ';\n -webkit-transition: ' +
  89. transition +
  90. ';\n transform: ' +
  91. transform +
  92. ';\n transition: ' +
  93. transition +
  94. ';\n ',
  95. });
  96. },
  97. swipeLeaveTransition: function () {
  98. var _a = this.data,
  99. leftWidth = _a.leftWidth,
  100. rightWidth = _a.rightWidth;
  101. var offset = this.offset;
  102. if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
  103. this.open('right');
  104. } else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
  105. this.open('left');
  106. } else {
  107. this.swipeMove(0);
  108. }
  109. this.setData({ catchMove: false });
  110. },
  111. startDrag: function (event) {
  112. if (this.data.disabled) {
  113. return;
  114. }
  115. this.startOffset = this.offset;
  116. this.touchStart(event);
  117. },
  118. noop: function () {},
  119. onDrag: function (event) {
  120. var _this = this;
  121. if (this.data.disabled) {
  122. return;
  123. }
  124. this.touchMove(event);
  125. if (this.direction !== 'horizontal') {
  126. return;
  127. }
  128. this.dragging = true;
  129. ARRAY.filter(function (item) {
  130. return item !== _this && item.offset !== 0;
  131. }).forEach(function (item) {
  132. return item.close();
  133. });
  134. this.setData({ catchMove: true });
  135. this.swipeMove(this.startOffset + this.deltaX);
  136. },
  137. endDrag: function () {
  138. if (this.data.disabled) {
  139. return;
  140. }
  141. this.dragging = false;
  142. this.swipeLeaveTransition();
  143. },
  144. onClick: function (event) {
  145. var _a = event.currentTarget.dataset.key,
  146. position = _a === void 0 ? 'outside' : _a;
  147. this.$emit('click', position);
  148. if (!this.offset) {
  149. return;
  150. }
  151. if (this.data.asyncClose) {
  152. this.$emit('close', {
  153. position: position,
  154. instance: this,
  155. name: this.data.name,
  156. });
  157. } else {
  158. this.swipeMove(0);
  159. }
  160. },
  161. },
  162. });