ai.touchui-vue 1.31.3 → 1.32.0

package/packages/popup/src/popup.vue

@@ -1,350 +1,350 @@
-<template>
-	<div class="to-popup" :class="setClass" @mousedown="$emit('mousedown')">
-		<div class="to-popupBg" @click="bgClose"></div>
-		<div ref="box" class="to-popupBox">
-			<div ref="wrapper" class="to-popupWrapper">
-				<slot></slot>
-			</div>
-		</div>
-	</div>
-</template>
-<script>
-import transition from 'ai.touchui-vue/src/mixins/transition'
-
-const MaxGroup = 8; // 最大层级
-const BoxWidth = 62.5; // 单位em
-const HalfBoxWidth = Math.round(BoxWidth / 2 * 100) / 100;
-
-export default {
-	name: 'ToPopup',
-	componentName: 'ToPopup',
-	mixins: [transition],
-	props: {
-		closable: {
-			type: Boolean,
-			default: true
-		},
-		appendToBody: {
-			type: Boolean,
-			default: true
-		},
-		closeOnClickModal: {
-			type: Boolean,
-			default: true
-		},
-		closeOnBlur: {
-			type: Boolean,
-			default: true
-		},
-		closeOnPressEscape: {
-			type: Boolean,
-			default: true
-		},
-		// destroyOnClose: {
-		// 	type: Boolean,
-		// 	default: false
-		// },
-		beforeClose: {
-			type: Function,
-			default: null
-		},
-		mask: {
-			type: Boolean,
-			default: true
-		},
-		// 宽度
-		// normal
-		// full
-		// wide
-		// half
-		width: {
-			type: String,
-			default() {
-				return this.$platform === 'phone' ? 'full' : 'normal'
-			},
-			validator: (val) => ['normal', 'full', 'wide', 'half'].indexOf(val) > -1
-		}
-	},
-	provide() {
-		return {
-			'popup': this
-		}
-	},
-	data() {
-		return {
-			activeStack: [''],
-			active: '',
-			visible: false,
-			closed: false,
-			key: 0,
-			currentPopupGroupIdx: -1,
-			currentPopupGroup: null,
-			popupGroups: [],
-			itemWidth: '',
-			triggerBy: 'browser',
-			preventBack: false
-		};
-	},
-	computed: {
-		type() {
-			if (this.width === 'normal' || this.width === 'half') {
-				return 2
-			} else {
-				return 1
-			}
-		},
-		setClass() {
-			let arr = []
-			if (this.width && this.width !== 'normal') {
-				arr.push(`to-popup-width-${this.width}`)
-			}
-			if (!this.mask) {
-				arr.push('to-popup-mask-false')
-			}
-			return arr
-		}
-	},
-	watch: {
-		visible(val) {
-			if (val) {
-				this.$emit('beforeOpen')
-				this.$emit('open'); // 不推荐使用
-				this.closed = false;
-				this.$el.style.visibility = 'visible'
-				this.setTransition(this.$el, 'translate(0,0)')
-				if (this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
-					window.history.pushState('', '', location.href)
-				}
-				this.$emit('opened')
-				this.$TouchUI.popups.unshift(this)
-			} else {
-				if (!this.closed) {
-					this.$emit('beforeClose')
-					this.$emit('close') // 不推荐使用
-				}
-				this.setTransition(this.$el, 'translate(100%,0)')
-				let timer = null
-				timer = setTimeout(() => {
-					this.$emit('closed')
-					clearTimeout(timer)
-					timer = null
-				}, 300);
-			}
-		}
-	},
-	mounted() {
-		if (this.appendToBody) {
-			document.body.appendChild(this.$el);
-		}
-		this.$once('hook:beforeDestroy', () => {
-			if (this.appendToBody && this.$el && this.$el.parentNode) {
-				this.$el.parentNode.removeChild(this.$el);
-			}
-		})
-
-		// 初始化popup动画
-		this.setTransition(this.$el, 'translate(100%,0)', 'none', '300ms', 'ease-out')
-		// 初始化box动画
-		this.setTransition(this.$refs['box'], 'translate(0,0)', 'none', '300ms', 'ease-out')
-		// 初始化wrapper动画
-		this.setTransition(this.$refs['wrapper'], 'translate(0,0)', 'none', '300ms', 'ease-out')
-
-		if (this.popupGroups.length > 0) {
-			this.currentPopupGroupIdx = 0;
-			this.currentPopupGroup = this.popupGroups[0];
-		}
-
-		// bind transitionEnd event
-		this.$el.addEventListener(this.TRNEND_EV, this, false)
-		window.addEventListener('popstate', this.browserBack)
-		this.$once('hook:beforeDestroy', () => {
-			this.$el.removeEventListener(this.TRNEND_EV, this, false)
-			window.removeEventListener('popstate', this.browserBack)
-		})
-	},
-	methods: {
-		handleEvent: function(e) {
-			var that = this;
-			switch (e.type) {
-				case that.TRNEND_EV: that._transitionEnd(e); break;
-			}
-		},
-		_transitionEnd: function(e, ...arg) {
-			var el = e.target;
-			if (!el || !el.nodeType) {return;}
-
-			var className = el.className ? el.className : '';
-			if ((' ' + className + ' ').indexOf(' to-popup ') > -1) {
-				if (this.equalTransform(el, 'translate(100%,0)')) {
-					el.style.visibility = 'hidden';
-				}
-			} else if ((' ' + className + ' ').indexOf(' to-popupBox ') > -1) {
-				// console.log('popupbox')
-			}
-
-			// 判断是popup相关的元素才清除动画，避免和popup结构里其它组件的动画事件冲突
-			if ((' ' + className + ' ').indexOf(' to-popup ') > -1 || (' ' + className + ' ').indexOf(' to-popupBox ') > -1) {
-				// 清除动画属性
-				this.clearTransitionProperty(el)
-			}
-		},
-		open(itemTag) {
-			this.$el.style.zIndex = window.$TouchUI.zIndex
-			window.$TouchUI.zIndex++
-			this.$emit('update:visible', true);
-			this.visible = true
-			if (this.currentPopupGroup && itemTag) {
-				this.currentPopupGroup.switch(itemTag)
-			}
-		},
-		bgClose() {
-			if (!this.closeOnClickModal || !this.closeOnBlur || !this.closable) { return }
-			this.close()
-		},
-		close() {
-			const len = this.currentPopupGroupIdx;
-			const backWithDelay = (i) => {
-				if (i <= len) {
-					setTimeout(() => {
-						this.back();
-						backWithDelay(i + 1);
-					}, i * 60);
-				}
-			};
-			backWithDelay(0);
-			this.active = ''
-			this.activeStack = ['']
-		},
-		'switch'(itemTag) {
-			if (!itemTag) { return }
-			if (!this.currentPopupGroup) { return }
-			this.currentPopupGroup.switch(itemTag)
-		},
-		setActive(itemTag) {
-			this.active = itemTag
-		},
-		browserBack() {
-			if (this.$TouchUI.popups.length > 0 && this._uid === this.$TouchUI.popups[0]._uid) {
-				this.$TouchUI.popups[0].back(false)
-			}
-		},
-		historyChange() {
-			this.preventBack = true
-			window.history.go(-1)
-
-			let timer = null
-			timer = setTimeout(() => {
-				this.preventBack = false
-				clearTimeout(timer)
-				timer = null
-			}, 50);
-		},
-		back(byUser = true) {
-			if (!this.currentPopupGroup) return
-			if (!this.currentPopupGroup.currentPopupItem) return
-			if (this.preventBack || !this.currentPopupGroup.currentPopupItem.visible) return
-			if (this.currentPopupGroup && this.currentPopupGroup.currentPopupItem && this.currentPopupGroup.currentPopupItem.lazy) {
-				this.currentPopupGroup.currentPopupItem.show = false
-			}
-			this.active = this.activeStack[this.activeStack.length - 1]
-			this.activeStack.splice(this.activeStack.length - 1, 1)
-			if (byUser && this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
-				this.historyChange()
-			}
-			if (this.currentPopupGroupIdx <= 0) {
-				if (this.beforeClose) {
-					const flag = this.beforeClose() // return true or return false
-					// if return false 则关闭
-					if (!flag) {
-						this.currentPopupGroup.currentPopupItem.visible = false
-						this.visible = false
-					}
-				} else {
-					this.currentPopupGroup.currentPopupItem.visible = false
-					this.visible = false
-				}
-				let timer = null
-				timer = setTimeout(() => {
-					this.$TouchUI.popups = this.$TouchUI.popups.filter((item) => {
-						return item._uid !== this._uid
-					})
-					clearTimeout(timer)
-					timer = null
-				}, 10);
-				return
-			}
-			let prevPopupGroupIdx = this.currentPopupGroupIdx - 1;
-			if (prevPopupGroupIdx < 0) {
-				return;
-			}
-
-			if (this.width === 'normal') {
-				if (prevPopupGroupIdx === 0) {
-					this.setTransition(this.$refs['box'], 'translate(0,0)')
-				}
-
-				const start = 2;
-				if (prevPopupGroupIdx >= (start - 2)) {
-					this.setTransition(this.$refs['wrapper'], 'translate(-' + (HalfBoxWidth * (prevPopupGroupIdx - start + 1)) + 'em,0)')
-				}
-			}
-
-			if (this.width === 'half') {
-				if (prevPopupGroupIdx === 0) {
-					this.setTransition(this.$refs['box'], 'translate(0,0)')
-				}
-
-				const start = 2;
-				if (prevPopupGroupIdx >= (start - 2)) {
-					this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * (prevPopupGroupIdx - start + 1)}%,0)`)
-				}
-			}
-
-			if (this.width === 'full' || this.width === 'wide') {
-				this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * prevPopupGroupIdx}%,0)`)
-			}
-
-			this.currentPopupGroupIdx = prevPopupGroupIdx;
-			this.currentPopupGroup = this.popupGroups[prevPopupGroupIdx];
-
-		},
-		forward(itemTag) {
-			if (this.currentPopupGroup.popupItemTags.indexOf(itemTag) > -1) {
-				this.switch(itemTag)
-				return;
-			}
-			let nextPopupGroupIdx = this.currentPopupGroupIdx + 1;
-			if (nextPopupGroupIdx > this.popupGroups.length - 1) {return;} // 判断是否超过总数
-			if (nextPopupGroupIdx > MaxGroup - 1) {return;} // 判断是否超过最大限制
-			if (this.width === 'normal') {
-				if (nextPopupGroupIdx === 1) {
-					this.setTransition(this.$refs['box'], 'translate(-' + HalfBoxWidth + 'em,0)')
-				} else if (nextPopupGroupIdx >= 2) {
-					const start = 2
-					this.setTransition(this.$refs['wrapper'], 'translate(-' + (HalfBoxWidth * (nextPopupGroupIdx - start + 1)) + 'em,0)')
-				}
-			}
-			if (this.width === 'half') {
-				if (nextPopupGroupIdx === 1) {
-					this.setTransition(this.$refs['box'], 'translate(-50%,0)')
-				} else if (nextPopupGroupIdx >= 2) {
-					const start = 2
-					this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * (nextPopupGroupIdx - start + 1)}%,0)`)
-				}
-			}
-			if (this.width === 'wide' || this.width === 'full') {
-				this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * nextPopupGroupIdx}%,0)`)
-			}
-			this.currentPopupGroupIdx = nextPopupGroupIdx;
-			this.currentPopupGroup = this.popupGroups[nextPopupGroupIdx];
-			this.activeStack.push(this.active)
-			if (itemTag) {
-				this.currentPopupGroup.switch(itemTag)
-			}
-			if (this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
-				window.history.pushState('', '', location.href)
-			}
-		}
-	}
-};
-</script>
+<template>
+	<div class="to-popup" :class="setClass" @mousedown="$emit('mousedown')">
+		<div class="to-popupBg" @click="bgClose"></div>
+		<div ref="box" class="to-popupBox">
+			<div ref="wrapper" class="to-popupWrapper">
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import transition from 'ai.touchui-vue/src/mixins/transition'
+
+const MaxGroup = 8; // 最大层级
+const BoxWidth = 62.5; // 单位em
+const HalfBoxWidth = Math.round(BoxWidth / 2 * 100) / 100;
+
+export default {
+	name: 'ToPopup',
+	componentName: 'ToPopup',
+	mixins: [transition],
+	props: {
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		appendToBody: {
+			type: Boolean,
+			default: true
+		},
+		closeOnClickModal: {
+			type: Boolean,
+			default: true
+		},
+		closeOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		closeOnPressEscape: {
+			type: Boolean,
+			default: true
+		},
+		// destroyOnClose: {
+		// 	type: Boolean,
+		// 	default: false
+		// },
+		beforeClose: {
+			type: Function,
+			default: null
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// 宽度
+		// normal
+		// full
+		// wide
+		// half
+		width: {
+			type: String,
+			default() {
+				return this.$platform === 'phone' ? 'full' : 'normal'
+			},
+			validator: (val) => ['normal', 'full', 'wide', 'half'].indexOf(val) > -1
+		}
+	},
+	provide() {
+		return {
+			'popup': this
+		}
+	},
+	data() {
+		return {
+			activeStack: [''],
+			active: '',
+			visible: false,
+			closed: false,
+			key: 0,
+			currentPopupGroupIdx: -1,
+			currentPopupGroup: null,
+			popupGroups: [],
+			itemWidth: '',
+			triggerBy: 'browser',
+			preventBack: false
+		};
+	},
+	computed: {
+		type() {
+			if (this.width === 'normal' || this.width === 'half') {
+				return 2
+			} else {
+				return 1
+			}
+		},
+		setClass() {
+			let arr = []
+			if (this.width && this.width !== 'normal') {
+				arr.push(`to-popup-width-${this.width}`)
+			}
+			if (!this.mask) {
+				arr.push('to-popup-mask-false')
+			}
+			return arr
+		}
+	},
+	watch: {
+		visible(val) {
+			if (val) {
+				this.$emit('beforeOpen')
+				this.$emit('open'); // 不推荐使用
+				this.closed = false;
+				this.$el.style.visibility = 'visible'
+				this.setTransition(this.$el, 'translate(0,0)')
+				if (this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
+					window.history.pushState('', '', location.href)
+				}
+				this.$emit('opened')
+				this.$TouchUI.popups.unshift(this)
+			} else {
+				if (!this.closed) {
+					this.$emit('beforeClose')
+					this.$emit('close') // 不推荐使用
+				}
+				this.setTransition(this.$el, 'translate(100%,0)')
+				let timer = null
+				timer = setTimeout(() => {
+					this.$emit('closed')
+					clearTimeout(timer)
+					timer = null
+				}, 300);
+			}
+		}
+	},
+	mounted() {
+		if (this.appendToBody) {
+			document.body.appendChild(this.$el);
+		}
+		this.$once('hook:beforeDestroy', () => {
+			if (this.appendToBody && this.$el && this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el);
+			}
+		})
+
+		// 初始化popup动画
+		this.setTransition(this.$el, 'translate(100%,0)', 'none', '300ms', 'ease-out')
+		// 初始化box动画
+		this.setTransition(this.$refs['box'], 'translate(0,0)', 'none', '300ms', 'ease-out')
+		// 初始化wrapper动画
+		this.setTransition(this.$refs['wrapper'], 'translate(0,0)', 'none', '300ms', 'ease-out')
+
+		if (this.popupGroups.length > 0) {
+			this.currentPopupGroupIdx = 0;
+			this.currentPopupGroup = this.popupGroups[0];
+		}
+
+		// bind transitionEnd event
+		this.$el.addEventListener(this.TRNEND_EV, this, false)
+		window.addEventListener('popstate', this.browserBack)
+		this.$once('hook:beforeDestroy', () => {
+			this.$el.removeEventListener(this.TRNEND_EV, this, false)
+			window.removeEventListener('popstate', this.browserBack)
+		})
+	},
+	methods: {
+		handleEvent: function(e) {
+			var that = this;
+			switch (e.type) {
+				case that.TRNEND_EV: that._transitionEnd(e); break;
+			}
+		},
+		_transitionEnd: function(e, ...arg) {
+			var el = e.target;
+			if (!el || !el.nodeType) {return;}
+
+			var className = el.className ? el.className : '';
+			if ((' ' + className + ' ').indexOf(' to-popup ') > -1) {
+				if (this.equalTransform(el, 'translate(100%,0)')) {
+					el.style.visibility = 'hidden';
+				}
+			} else if ((' ' + className + ' ').indexOf(' to-popupBox ') > -1) {
+				// console.log('popupbox')
+			}
+
+			// 判断是popup相关的元素才清除动画，避免和popup结构里其它组件的动画事件冲突
+			if ((' ' + className + ' ').indexOf(' to-popup ') > -1 || (' ' + className + ' ').indexOf(' to-popupBox ') > -1) {
+				// 清除动画属性
+				this.clearTransitionProperty(el)
+			}
+		},
+		open(itemTag) {
+			this.$el.style.zIndex = window.$TouchUI.zIndex
+			window.$TouchUI.zIndex++
+			this.$emit('update:visible', true);
+			this.visible = true
+			if (this.currentPopupGroup && itemTag) {
+				this.currentPopupGroup.switch(itemTag)
+			}
+		},
+		bgClose() {
+			if (!this.closeOnClickModal || !this.closeOnBlur || !this.closable) { return }
+			this.close()
+		},
+		close() {
+			const len = this.currentPopupGroupIdx;
+			const backWithDelay = (i) => {
+				if (i <= len) {
+					setTimeout(() => {
+						this.back();
+						backWithDelay(i + 1);
+					}, i * 60);
+				}
+			};
+			backWithDelay(0);
+			this.active = ''
+			this.activeStack = ['']
+		},
+		'switch'(itemTag) {
+			if (!itemTag) { return }
+			if (!this.currentPopupGroup) { return }
+			this.currentPopupGroup.switch(itemTag)
+		},
+		setActive(itemTag) {
+			this.active = itemTag
+		},
+		browserBack() {
+			if (this.$TouchUI.popups.length > 0 && this._uid === this.$TouchUI.popups[0]._uid) {
+				this.$TouchUI.popups[0].back(false)
+			}
+		},
+		historyChange() {
+			this.preventBack = true
+			window.history.go(-1)
+
+			let timer = null
+			timer = setTimeout(() => {
+				this.preventBack = false
+				clearTimeout(timer)
+				timer = null
+			}, 50);
+		},
+		back(byUser = true) {
+			if (!this.currentPopupGroup) return
+			if (!this.currentPopupGroup.currentPopupItem) return
+			if (this.preventBack || !this.currentPopupGroup.currentPopupItem.visible) return
+			if (this.currentPopupGroup && this.currentPopupGroup.currentPopupItem && this.currentPopupGroup.currentPopupItem.lazy) {
+				this.currentPopupGroup.currentPopupItem.show = false
+			}
+			this.active = this.activeStack[this.activeStack.length - 1]
+			this.activeStack.splice(this.activeStack.length - 1, 1)
+			if (byUser && this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
+				this.historyChange()
+			}
+			if (this.currentPopupGroupIdx <= 0) {
+				if (this.beforeClose) {
+					const flag = this.beforeClose() // return true or return false
+					// if return false 则关闭
+					if (!flag) {
+						this.currentPopupGroup.currentPopupItem.visible = false
+						this.visible = false
+					}
+				} else {
+					this.currentPopupGroup.currentPopupItem.visible = false
+					this.visible = false
+				}
+				let timer = null
+				timer = setTimeout(() => {
+					this.$TouchUI.popups = this.$TouchUI.popups.filter((item) => {
+						return item._uid !== this._uid
+					})
+					clearTimeout(timer)
+					timer = null
+				}, 10);
+				return
+			}
+			let prevPopupGroupIdx = this.currentPopupGroupIdx - 1;
+			if (prevPopupGroupIdx < 0) {
+				return;
+			}
+
+			if (this.width === 'normal') {
+				if (prevPopupGroupIdx === 0) {
+					this.setTransition(this.$refs['box'], 'translate(0,0)')
+				}
+
+				const start = 2;
+				if (prevPopupGroupIdx >= (start - 2)) {
+					this.setTransition(this.$refs['wrapper'], 'translate(-' + (HalfBoxWidth * (prevPopupGroupIdx - start + 1)) + 'em,0)')
+				}
+			}
+
+			if (this.width === 'half') {
+				if (prevPopupGroupIdx === 0) {
+					this.setTransition(this.$refs['box'], 'translate(0,0)')
+				}
+
+				const start = 2;
+				if (prevPopupGroupIdx >= (start - 2)) {
+					this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * (prevPopupGroupIdx - start + 1)}%,0)`)
+				}
+			}
+
+			if (this.width === 'full' || this.width === 'wide') {
+				this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * prevPopupGroupIdx}%,0)`)
+			}
+
+			this.currentPopupGroupIdx = prevPopupGroupIdx;
+			this.currentPopupGroup = this.popupGroups[prevPopupGroupIdx];
+
+		},
+		forward(itemTag) {
+			if (this.currentPopupGroup.popupItemTags.indexOf(itemTag) > -1) {
+				this.switch(itemTag)
+				return;
+			}
+			let nextPopupGroupIdx = this.currentPopupGroupIdx + 1;
+			if (nextPopupGroupIdx > this.popupGroups.length - 1) {return;} // 判断是否超过总数
+			if (nextPopupGroupIdx > MaxGroup - 1) {return;} // 判断是否超过最大限制
+			if (this.width === 'normal') {
+				if (nextPopupGroupIdx === 1) {
+					this.setTransition(this.$refs['box'], 'translate(-' + HalfBoxWidth + 'em,0)')
+				} else if (nextPopupGroupIdx >= 2) {
+					const start = 2
+					this.setTransition(this.$refs['wrapper'], 'translate(-' + (HalfBoxWidth * (nextPopupGroupIdx - start + 1)) + 'em,0)')
+				}
+			}
+			if (this.width === 'half') {
+				if (nextPopupGroupIdx === 1) {
+					this.setTransition(this.$refs['box'], 'translate(-50%,0)')
+				} else if (nextPopupGroupIdx >= 2) {
+					const start = 2
+					this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * (nextPopupGroupIdx - start + 1)}%,0)`)
+				}
+			}
+			if (this.width === 'wide' || this.width === 'full') {
+				this.setTransition(this.$refs['wrapper'], `translate(-${12.5 * nextPopupGroupIdx}%,0)`)
+			}
+			this.currentPopupGroupIdx = nextPopupGroupIdx;
+			this.currentPopupGroup = this.popupGroups[nextPopupGroupIdx];
+			this.activeStack.push(this.active)
+			if (itemTag) {
+				this.currentPopupGroup.switch(itemTag)
+			}
+			if (this.$TouchUI.popup && this.$TouchUI.popup.nativeBack) {
+				window.history.pushState('', '', location.href)
+			}
+		}
+	}
+};
+</script>