index.js 4.1 KB

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