123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- 'use strict';
- exports.__esModule = true;
- var _vue = require('vue');
- var _vue2 = _interopRequireDefault(_vue);
- var _popup = require('element-ui/lib/utils/popup');
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- var PopperJS = _vue2.default.prototype.$isServer ? function () {} : require('./popper');
- var stop = function stop(e) {
- return e.stopPropagation();
- };
- /**
- * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
- * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
- * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
- * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
- * @param {Boolean} [visible=false] Visibility of the popup element.
- * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
- */
- exports.default = {
- props: {
- transformOrigin: {
- type: [Boolean, String],
- default: true
- },
- placement: {
- type: String,
- default: 'bottom'
- },
- boundariesPadding: {
- type: Number,
- default: 5
- },
- reference: {},
- popper: {},
- offset: {
- default: 0
- },
- value: Boolean,
- visibleArrow: Boolean,
- arrowOffset: {
- type: Number,
- default: 35
- },
- appendToBody: {
- type: Boolean,
- default: true
- },
- popperOptions: {
- type: Object,
- default: function _default() {
- return {
- gpuAcceleration: false
- };
- }
- }
- },
- data: function data() {
- return {
- showPopper: false,
- currentPlacement: ''
- };
- },
- watch: {
- value: {
- immediate: true,
- handler: function handler(val) {
- this.showPopper = val;
- this.$emit('input', val);
- }
- },
- showPopper: function showPopper(val) {
- if (this.disabled) return;
- val ? this.updatePopper() : this.destroyPopper();
- this.$emit('input', val);
- }
- },
- methods: {
- createPopper: function createPopper() {
- var _this = this;
- if (this.$isServer) return;
- this.currentPlacement = this.currentPlacement || this.placement;
- if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
- return;
- }
- var options = this.popperOptions;
- var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
- var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
- if (!reference && this.$slots.reference && this.$slots.reference[0]) {
- reference = this.referenceElm = this.$slots.reference[0].elm;
- }
- if (!popper || !reference) return;
- if (this.visibleArrow) this.appendArrow(popper);
- if (this.appendToBody) document.body.appendChild(this.popperElm);
- if (this.popperJS && this.popperJS.destroy) {
- this.popperJS.destroy();
- }
- options.placement = this.currentPlacement;
- options.offset = this.offset;
- options.arrowOffset = this.arrowOffset;
- this.popperJS = new PopperJS(reference, popper, options);
- this.popperJS.onCreate(function (_) {
- _this.$emit('created', _this);
- _this.resetTransformOrigin();
- _this.$nextTick(_this.updatePopper);
- });
- if (typeof options.onUpdate === 'function') {
- this.popperJS.onUpdate(options.onUpdate);
- }
- this.popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
- this.popperElm.addEventListener('click', stop);
- },
- updatePopper: function updatePopper() {
- var popperJS = this.popperJS;
- if (popperJS) {
- popperJS.update();
- if (popperJS._popper) {
- popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
- }
- } else {
- this.createPopper();
- }
- },
- doDestroy: function doDestroy(forceDestroy) {
- /* istanbul ignore if */
- if (!this.popperJS || this.showPopper && !forceDestroy) return;
- this.popperJS.destroy();
- this.popperJS = null;
- },
- destroyPopper: function destroyPopper() {
- if (this.popperJS) {
- this.resetTransformOrigin();
- }
- },
- resetTransformOrigin: function resetTransformOrigin() {
- if (!this.transformOrigin) return;
- var placementMap = {
- top: 'bottom',
- bottom: 'top',
- left: 'right',
- right: 'left'
- };
- var placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
- var origin = placementMap[placement];
- this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
- },
- appendArrow: function appendArrow(element) {
- var hash = void 0;
- if (this.appended) {
- return;
- }
- this.appended = true;
- for (var item in element.attributes) {
- if (/^_v-/.test(element.attributes[item].name)) {
- hash = element.attributes[item].name;
- break;
- }
- }
- var arrow = document.createElement('div');
- if (hash) {
- arrow.setAttribute(hash, '');
- }
- arrow.setAttribute('x-arrow', '');
- arrow.className = 'popper__arrow';
- element.appendChild(arrow);
- }
- },
- beforeDestroy: function beforeDestroy() {
- this.doDestroy(true);
- if (this.popperElm && this.popperElm.parentNode === document.body) {
- this.popperElm.removeEventListener('click', stop);
- document.body.removeChild(this.popperElm);
- }
- },
- // call destroy in keep-alive mode
- deactivated: function deactivated() {
- this.$options.beforeDestroy[0].call(this);
- }
- };
|