index.js 5.2 KB

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