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