vue-popper.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _vue = require('vue');
  4. var _vue2 = _interopRequireDefault(_vue);
  5. var _popup = require('element-ui/lib/utils/popup');
  6. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  7. var PopperJS = _vue2.default.prototype.$isServer ? function () {} : require('./popper');
  8. var stop = function stop(e) {
  9. return e.stopPropagation();
  10. };
  11. /**
  12. * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
  13. * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
  14. * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
  15. * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
  16. * @param {Boolean} [visible=false] Visibility of the popup element.
  17. * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
  18. */
  19. exports.default = {
  20. props: {
  21. transformOrigin: {
  22. type: [Boolean, String],
  23. default: true
  24. },
  25. placement: {
  26. type: String,
  27. default: 'bottom'
  28. },
  29. boundariesPadding: {
  30. type: Number,
  31. default: 5
  32. },
  33. reference: {},
  34. popper: {},
  35. offset: {
  36. default: 0
  37. },
  38. value: Boolean,
  39. visibleArrow: Boolean,
  40. arrowOffset: {
  41. type: Number,
  42. default: 35
  43. },
  44. appendToBody: {
  45. type: Boolean,
  46. default: true
  47. },
  48. popperOptions: {
  49. type: Object,
  50. default: function _default() {
  51. return {
  52. gpuAcceleration: false
  53. };
  54. }
  55. }
  56. },
  57. data: function data() {
  58. return {
  59. showPopper: false,
  60. currentPlacement: ''
  61. };
  62. },
  63. watch: {
  64. value: {
  65. immediate: true,
  66. handler: function handler(val) {
  67. this.showPopper = val;
  68. this.$emit('input', val);
  69. }
  70. },
  71. showPopper: function showPopper(val) {
  72. if (this.disabled) return;
  73. val ? this.updatePopper() : this.destroyPopper();
  74. this.$emit('input', val);
  75. }
  76. },
  77. methods: {
  78. createPopper: function createPopper() {
  79. var _this = this;
  80. if (this.$isServer) return;
  81. this.currentPlacement = this.currentPlacement || this.placement;
  82. if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
  83. return;
  84. }
  85. var options = this.popperOptions;
  86. var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
  87. var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
  88. if (!reference && this.$slots.reference && this.$slots.reference[0]) {
  89. reference = this.referenceElm = this.$slots.reference[0].elm;
  90. }
  91. if (!popper || !reference) return;
  92. if (this.visibleArrow) this.appendArrow(popper);
  93. if (this.appendToBody) document.body.appendChild(this.popperElm);
  94. if (this.popperJS && this.popperJS.destroy) {
  95. this.popperJS.destroy();
  96. }
  97. options.placement = this.currentPlacement;
  98. options.offset = this.offset;
  99. options.arrowOffset = this.arrowOffset;
  100. this.popperJS = new PopperJS(reference, popper, options);
  101. this.popperJS.onCreate(function (_) {
  102. _this.$emit('created', _this);
  103. _this.resetTransformOrigin();
  104. _this.$nextTick(_this.updatePopper);
  105. });
  106. if (typeof options.onUpdate === 'function') {
  107. this.popperJS.onUpdate(options.onUpdate);
  108. }
  109. this.popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
  110. this.popperElm.addEventListener('click', stop);
  111. },
  112. updatePopper: function updatePopper() {
  113. var popperJS = this.popperJS;
  114. if (popperJS) {
  115. popperJS.update();
  116. if (popperJS._popper) {
  117. popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
  118. }
  119. } else {
  120. this.createPopper();
  121. }
  122. },
  123. doDestroy: function doDestroy(forceDestroy) {
  124. /* istanbul ignore if */
  125. if (!this.popperJS || this.showPopper && !forceDestroy) return;
  126. this.popperJS.destroy();
  127. this.popperJS = null;
  128. },
  129. destroyPopper: function destroyPopper() {
  130. if (this.popperJS) {
  131. this.resetTransformOrigin();
  132. }
  133. },
  134. resetTransformOrigin: function resetTransformOrigin() {
  135. if (!this.transformOrigin) return;
  136. var placementMap = {
  137. top: 'bottom',
  138. bottom: 'top',
  139. left: 'right',
  140. right: 'left'
  141. };
  142. var placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
  143. var origin = placementMap[placement];
  144. this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
  145. },
  146. appendArrow: function appendArrow(element) {
  147. var hash = void 0;
  148. if (this.appended) {
  149. return;
  150. }
  151. this.appended = true;
  152. for (var item in element.attributes) {
  153. if (/^_v-/.test(element.attributes[item].name)) {
  154. hash = element.attributes[item].name;
  155. break;
  156. }
  157. }
  158. var arrow = document.createElement('div');
  159. if (hash) {
  160. arrow.setAttribute(hash, '');
  161. }
  162. arrow.setAttribute('x-arrow', '');
  163. arrow.className = 'popper__arrow';
  164. element.appendChild(arrow);
  165. }
  166. },
  167. beforeDestroy: function beforeDestroy() {
  168. this.doDestroy(true);
  169. if (this.popperElm && this.popperElm.parentNode === document.body) {
  170. this.popperElm.removeEventListener('click', stop);
  171. document.body.removeChild(this.popperElm);
  172. }
  173. },
  174. // call destroy in keep-alive mode
  175. deactivated: function deactivated() {
  176. this.$options.beforeDestroy[0].call(this);
  177. }
  178. };