index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.PopupMixin = void 0;
  4. var _context = require("./context");
  5. var _touch = require("../touch");
  6. var _event = require("../../utils/event");
  7. var _overlay = require("./overlay");
  8. var _scroll = require("../../utils/scroll");
  9. var PopupMixin = {
  10. mixins: [_touch.TouchMixin],
  11. props: {
  12. // whether to show popup
  13. value: Boolean,
  14. // whether to show overlay
  15. overlay: Boolean,
  16. // overlay custom style
  17. overlayStyle: Object,
  18. // overlay custom class name
  19. overlayClass: String,
  20. // whether to close popup when click overlay
  21. closeOnClickOverlay: Boolean,
  22. // z-index
  23. zIndex: [String, Number],
  24. // return the mount node for popup
  25. getContainer: [String, Function],
  26. // prevent body scroll
  27. lockScroll: {
  28. type: Boolean,
  29. "default": true
  30. },
  31. // whether to lazy render
  32. lazyRender: {
  33. type: Boolean,
  34. "default": true
  35. }
  36. },
  37. data: function data() {
  38. return {
  39. inited: this.value
  40. };
  41. },
  42. computed: {
  43. shouldRender: function shouldRender() {
  44. return this.inited || !this.lazyRender;
  45. }
  46. },
  47. watch: {
  48. value: function value(val) {
  49. var type = val ? 'open' : 'close';
  50. this.inited = this.inited || this.value;
  51. this[type]();
  52. this.$emit(type);
  53. },
  54. getContainer: function getContainer() {
  55. this.move();
  56. },
  57. overlay: function overlay() {
  58. this.renderOverlay();
  59. }
  60. },
  61. mounted: function mounted() {
  62. if (this.getContainer) {
  63. this.move();
  64. }
  65. if (this.value) {
  66. this.open();
  67. }
  68. },
  69. activated: function activated() {
  70. /* istanbul ignore next */
  71. if (this.value) {
  72. this.open();
  73. }
  74. },
  75. beforeDestroy: function beforeDestroy() {
  76. this.close();
  77. if (this.getContainer && this.$parent && this.$parent.$el) {
  78. this.$parent.$el.appendChild(this.$el);
  79. }
  80. },
  81. deactivated: function deactivated() {
  82. /* istanbul ignore next */
  83. this.close();
  84. },
  85. methods: {
  86. open: function open() {
  87. /* istanbul ignore next */
  88. if (this.$isServer || this.opened) {
  89. return;
  90. } // cover default zIndex
  91. if (this.zIndex !== undefined) {
  92. _context.context.zIndex = this.zIndex;
  93. }
  94. this.opened = true;
  95. this.renderOverlay();
  96. if (this.lockScroll) {
  97. (0, _event.on)(document, 'touchstart', this.touchStart);
  98. (0, _event.on)(document, 'touchmove', this.onTouchMove);
  99. if (!_context.context.lockCount) {
  100. document.body.classList.add('van-overflow-hidden');
  101. }
  102. _context.context.lockCount++;
  103. }
  104. },
  105. close: function close() {
  106. if (!this.opened) {
  107. return;
  108. }
  109. if (this.lockScroll) {
  110. _context.context.lockCount--;
  111. (0, _event.off)(document, 'touchstart', this.touchStart);
  112. (0, _event.off)(document, 'touchmove', this.onTouchMove);
  113. if (!_context.context.lockCount) {
  114. document.body.classList.remove('van-overflow-hidden');
  115. }
  116. }
  117. this.opened = false;
  118. (0, _overlay.closeOverlay)(this);
  119. this.$emit('input', false);
  120. },
  121. move: function move() {
  122. var container;
  123. var getContainer = this.getContainer;
  124. if (getContainer) {
  125. container = typeof getContainer === 'string' ? document.querySelector(getContainer) : getContainer();
  126. } else if (this.$parent) {
  127. container = this.$parent.$el;
  128. }
  129. if (container && container !== this.$el.parentNode) {
  130. container.appendChild(this.$el);
  131. }
  132. if (this.overlay) {
  133. (0, _overlay.updateOverlay)();
  134. }
  135. },
  136. onTouchMove: function onTouchMove(event) {
  137. this.touchMove(event);
  138. var direction = this.deltaY > 0 ? '10' : '01';
  139. var el = (0, _scroll.getScrollEventTarget)(event.target, this.$el);
  140. var scrollHeight = el.scrollHeight,
  141. offsetHeight = el.offsetHeight,
  142. scrollTop = el.scrollTop;
  143. var status = '11';
  144. /* istanbul ignore next */
  145. if (scrollTop === 0) {
  146. status = offsetHeight >= scrollHeight ? '00' : '01';
  147. } else if (scrollTop + offsetHeight >= scrollHeight) {
  148. status = '10';
  149. }
  150. /* istanbul ignore next */
  151. if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
  152. (0, _event.preventDefault)(event, true);
  153. }
  154. },
  155. renderOverlay: function renderOverlay() {
  156. if (this.$isServer || !this.value) {
  157. return;
  158. }
  159. if (this.overlay) {
  160. (0, _overlay.openOverlay)(this, {
  161. zIndex: _context.context.zIndex++,
  162. className: this.overlayClass,
  163. customStyle: this.overlayStyle
  164. });
  165. } else {
  166. (0, _overlay.closeOverlay)(this);
  167. }
  168. this.updateZIndex();
  169. },
  170. updateZIndex: function updateZIndex() {
  171. var _this = this;
  172. this.$nextTick(function () {
  173. _this.$el.style.zIndex = _context.context.zIndex++;
  174. });
  175. }
  176. }
  177. };
  178. exports.PopupMixin = PopupMixin;