index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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 THRESHOLD = 0.3;
  6. component_1.VantComponent({
  7. props: {
  8. disabled: Boolean,
  9. leftWidth: {
  10. type: Number,
  11. value: 0
  12. },
  13. rightWidth: {
  14. type: Number,
  15. value: 0
  16. },
  17. asyncClose: Boolean
  18. },
  19. mixins: [touch_1.touch],
  20. data: {
  21. catchMove: false
  22. },
  23. created: function () {
  24. this.offset = 0;
  25. },
  26. methods: {
  27. open: function (position) {
  28. var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
  29. var offset = position === 'left' ? leftWidth : -rightWidth;
  30. this.swipeMove(offset);
  31. },
  32. close: function () {
  33. this.swipeMove(0);
  34. },
  35. swipeMove: function (offset) {
  36. if (offset === void 0) { offset = 0; }
  37. this.offset = offset;
  38. var transform = "translate3d(" + offset + "px, 0, 0)";
  39. var transition = this.draging
  40. ? 'none'
  41. : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  42. this.set({
  43. wrapperStyle: "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n "
  44. });
  45. },
  46. swipeLeaveTransition: function () {
  47. var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
  48. var offset = this.offset;
  49. if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
  50. this.open('right');
  51. }
  52. else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
  53. this.open('left');
  54. }
  55. else {
  56. this.swipeMove(0);
  57. }
  58. this.set({ catchMove: false });
  59. },
  60. startDrag: function (event) {
  61. if (this.data.disabled) {
  62. return;
  63. }
  64. this.draging = true;
  65. this.startOffset = this.offset;
  66. this.firstDirection = '';
  67. this.touchStart(event);
  68. },
  69. noop: function () { },
  70. onDrag: function (event) {
  71. if (this.data.disabled) {
  72. return;
  73. }
  74. this.touchMove(event);
  75. if (!this.firstDirection) {
  76. this.firstDirection = this.direction;
  77. this.set({ catchMove: this.firstDirection === 'horizontal' });
  78. }
  79. if (this.firstDirection === 'vertical') {
  80. return;
  81. }
  82. var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
  83. var offset = this.startOffset + this.deltaX;
  84. if ((rightWidth > 0 && -offset > rightWidth) ||
  85. (leftWidth > 0 && offset > leftWidth)) {
  86. return;
  87. }
  88. this.swipeMove(offset);
  89. },
  90. endDrag: function () {
  91. if (this.data.disabled) {
  92. return;
  93. }
  94. this.draging = false;
  95. this.swipeLeaveTransition();
  96. },
  97. onClick: function (event) {
  98. var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
  99. this.$emit('click', position);
  100. if (!this.offset) {
  101. return;
  102. }
  103. if (this.data.asyncClose) {
  104. this.$emit('close', { position: position, instance: this });
  105. }
  106. else {
  107. this.swipeMove(0);
  108. }
  109. }
  110. }
  111. });