1 | ;(function(){
|
2 | (function (global, factory) {
|
3 | if (typeof define === "function" && define.amd) {
|
4 | define(['exports', '../transition', './mixins', '../_style/global.css', './style/index.css'], factory);
|
5 | } else if (typeof exports !== "undefined") {
|
6 | factory(exports, require('../transition'), require('./mixins'), require('../_style/global.css'), require('./style/index.css'));
|
7 | } else {
|
8 | var mod = {
|
9 | exports: {}
|
10 | };
|
11 | factory(mod.exports, global.transition, global.mixins, global.global, global.index);
|
12 | global.index = mod.exports;
|
13 | }
|
14 | })(this, function (exports, _transition, _mixins) {
|
15 | 'use strict';
|
16 |
|
17 | Object.defineProperty(exports, "__esModule", {
|
18 | value: true
|
19 | });
|
20 |
|
21 | var _transition2 = _interopRequireDefault(_transition);
|
22 |
|
23 | var _mixins2 = _interopRequireDefault(_mixins);
|
24 |
|
25 | function _interopRequireDefault(obj) {
|
26 | return obj && obj.__esModule ? obj : {
|
27 | default: obj
|
28 | };
|
29 | }
|
30 |
|
31 | exports.default = {
|
32 | name: 'md-popup',
|
33 |
|
34 | mixins: [_mixins2.default],
|
35 |
|
36 | components: {
|
37 | 'md-transition': _transition2.default
|
38 | },
|
39 |
|
40 | props: {
|
41 | position: {
|
42 | type: String,
|
43 | default: 'center'
|
44 | },
|
45 | transition: {
|
46 | type: String,
|
47 | default: function _default() {
|
48 | switch (this.position) {
|
49 | case 'bottom':
|
50 | return 'md-slide-up';
|
51 |
|
52 | case 'top':
|
53 | return 'md-slide-down';
|
54 |
|
55 | case 'left':
|
56 | return 'md-slide-right';
|
57 |
|
58 | case 'right':
|
59 | return 'md-slide-left';
|
60 | default:
|
61 | return 'md-fade';}
|
62 | }
|
63 | },
|
64 | preventScroll: {
|
65 | type: Boolean,
|
66 | default: false
|
67 | },
|
68 | preventScrollExclude: {
|
69 | type: [String, Function],
|
70 | default: function _default() {
|
71 | return '';
|
72 | }
|
73 | }
|
74 | },
|
75 |
|
76 | data: function data() {
|
77 | return {
|
78 | isPopupShow: false,
|
79 |
|
80 | isPopupBoxShow: false,
|
81 |
|
82 | isAnimation: false,
|
83 | largeRadius: false
|
84 | };
|
85 | },
|
86 |
|
87 |
|
88 | watch: {
|
89 | value: function value(val) {
|
90 | var _this = this;
|
91 |
|
92 | if (val) {
|
93 | if (this.isAnimation) {
|
94 | setTimeout(function () {
|
95 | _this.$_showPopupBox();
|
96 | }, 50);
|
97 | } else {
|
98 | this.$_showPopupBox();
|
99 | }
|
100 | } else {
|
101 | this.$_hidePopupBox();
|
102 | }
|
103 | },
|
104 | preventScrollExclude: function preventScrollExclude(val, oldVal) {
|
105 | this.$_preventScrollExclude(false, oldVal);
|
106 |
|
107 | this.$_preventScrollExclude(true, val);
|
108 | }
|
109 | },
|
110 |
|
111 | mounted: function mounted() {
|
112 | this.value && this.$_showPopupBox();
|
113 | },
|
114 |
|
115 |
|
116 | methods: {
|
117 | $_showPopupBox: function $_showPopupBox() {
|
118 | this.isPopupShow = true;
|
119 | this.isAnimation = true;
|
120 |
|
121 | this.isPopupBoxShow = true;
|
122 |
|
123 | if (process.env.MAND_ENV === 'test') {
|
124 | this.$_onPopupTransitionStart();
|
125 | this.$_onPopupTransitionEnd();
|
126 | }
|
127 |
|
128 | this.preventScroll && this.$_preventScroll(true);
|
129 | },
|
130 | $_hidePopupBox: function $_hidePopupBox() {
|
131 | this.isAnimation = true;
|
132 | this.isPopupBoxShow = false;
|
133 | this.preventScroll && this.$_preventScroll(false);
|
134 | this.$emit('input', false);
|
135 |
|
136 | if (process.env.MAND_ENV === 'test') {
|
137 | this.$_onPopupTransitionStart();
|
138 | this.$_onPopupTransitionEnd();
|
139 | }
|
140 | },
|
141 | $_preventScroll: function $_preventScroll(isBind) {
|
142 | var handler = isBind ? 'addEventListener' : 'removeEventListener';
|
143 | var masker = this.$el.querySelector('.md-popup-mask');
|
144 | var boxer = this.$el.querySelector('.md-popup-box');
|
145 |
|
146 | masker && masker[handler]('touchmove', this.$_preventDefault, false);
|
147 | boxer && boxer[handler]('touchmove', this.$_preventDefault, false);
|
148 | this.$_preventScrollExclude(isBind);
|
149 | },
|
150 | $_preventScrollExclude: function $_preventScrollExclude(isBind, preventScrollExclude) {
|
151 | var handler = isBind ? 'addEventListener' : 'removeEventListener';
|
152 | preventScrollExclude = preventScrollExclude || this.preventScrollExclude;
|
153 | var excluder = preventScrollExclude && typeof preventScrollExclude === 'string' ? this.$el.querySelector(preventScrollExclude) : preventScrollExclude;
|
154 | excluder && excluder[handler]('touchmove', this.$_stopImmediatePropagation, false);
|
155 | },
|
156 | $_preventDefault: function $_preventDefault(event) {
|
157 | event.preventDefault();
|
158 | },
|
159 | $_stopImmediatePropagation: function $_stopImmediatePropagation(event) {
|
160 | event.stopImmediatePropagation();
|
161 | },
|
162 | $_onPopupTransitionStart: function $_onPopupTransitionStart() {
|
163 | if (!this.isPopupBoxShow) {
|
164 | this.$emit('beforeHide');
|
165 | this.$emit('before-hide');
|
166 | } else {
|
167 | this.$emit('beforeShow');
|
168 | this.$emit('before-show');
|
169 | }
|
170 | },
|
171 | $_onPopupTransitionEnd: function $_onPopupTransitionEnd() {
|
172 | if (!this.isAnimation) {
|
173 | return;
|
174 | }
|
175 |
|
176 | if (!this.isPopupBoxShow) {
|
177 | this.isPopupShow = false;
|
178 | this.$emit('hide');
|
179 | } else {
|
180 | this.$emit('show');
|
181 | }
|
182 |
|
183 | this.isAnimation = false;
|
184 | },
|
185 | $_onPopupMaskClick: function $_onPopupMaskClick() {
|
186 | if (this.maskClosable) {
|
187 | this.$_hidePopupBox();
|
188 | this.$emit('maskClick');
|
189 | }
|
190 | }
|
191 | }
|
192 | };
|
193 | });
|
194 | })()
|
195 | if (module.exports.__esModule) module.exports = module.exports.default
|
196 | var __vue__options__ = (typeof module.exports === "function"? module.exports.options: module.exports)
|
197 | __vue__options__.render = function render () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isPopupShow),expression:"isPopupShow"}],staticClass:"md-popup",class:[
|
198 | _vm.hasMask ? 'with-mask' : '',
|
199 | _vm.largeRadius ? 'large-radius' : '',
|
200 | _vm.position
|
201 | ]},[_c('transition',{attrs:{"name":"md-mask-fade"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasMask && _vm.isPopupBoxShow),expression:"hasMask && isPopupBoxShow"}],staticClass:"md-popup-mask",on:{"click":_vm.$_onPopupMaskClick}})]),_vm._v(" "),_c('md-transition',{attrs:{"name":_vm.transition},on:{"before-enter":_vm.$_onPopupTransitionStart,"before-leave":_vm.$_onPopupTransitionStart,"after-enter":_vm.$_onPopupTransitionEnd,"after-leave":_vm.$_onPopupTransitionEnd}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isPopupBoxShow),expression:"isPopupBoxShow"}],staticClass:"md-popup-box",class:[
|
202 | _vm.transition
|
203 | ]},[_vm._t("default")],2)])],1)}
|
204 | __vue__options__.staticRenderFns = []
|