ai.touchui-vue 1.30.2 → 1.30.3

package/packages/float/src/main.vue

@@ -1,642 +1,642 @@
-<template>
-	<div v-if="lazy ? ifShow : true" :class="setClass" :style="setStyle" @mousedown="$emit('mousedown')">
-		<div ref="mask" class="mask" @click="maskClickHandle"></div>
-		<div ref="content" class="content" :class="setContentClass" :style="setContentStyle">
-			<slot></slot>
-		</div>
-	</div>
-</template>
-<script>
-export default {
-	name: 'ToFloat',
-	props: {
-		slide: Boolean,
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.float && this.$TouchUI.float.lazy === false) {
-					return false
-				} else {
-					return true
-				}
-			}
-		},
-		position: {
-			type: String,
-			default() {
-				return this.slide ? 'right' : 'auto'
-			}
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		height: {
-			type: [Number, String],
-			default: ''
-		},
-		left: {
-			type: [Number, String],
-			default: ''
-		},
-		top: {
-			type: [Number, String],
-			default: ''
-		},
-		align: {
-			type: String,
-			default: 'auto'
-		},
-		mask: {
-			type: Boolean,
-			default: true
-		},
-		// 是否可以通过点击 modal 关闭
-		closeOnBlur: {
-			type: Boolean,
-			default: true
-		},
-		// normal 一般形式
-		// pill 药片形式
-		// round 圆球（不支持）
-		// none 无圆角
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.float.fillet || 'none'
-			}
-		},
-		// right / left / bottom / top
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		// 关闭前执行事件，以便通过判断阻止关闭
-		beforeClose: {
-			type: Function,
-			default: null
-		}
-	},
-	data() {
-		return {
-			origin: 'top',
-			ifShow: false,
-			show: false,
-			scrollNode: null, // 滚动的节点
-			iposition: '',
-			ialign: '',
-			link: null,
-			event: '',
-			opened: false,
-			isOver: false // 内容是否超过 float 本身的高度
-		}
-	},
-	computed: {
-		setClass() {
-			let arr = [];
-			if (this.show) {
-				arr.push('to-float-show')
-			}
-			if (this.slide) {
-				arr.push('to-float-slide')
-			} else {
-				arr.push('to-float')
-			}
-			if (this.iposition !== 'auto') {
-				arr.push(`to-float-position-${this.iposition}`)
-			}
-			if (this.origin === 'bottom') {
-				arr.push('to-float-origin-bottom')
-			}
-			if (!this.mask) {
-				arr.push('to-float-mask-false')
-			}
-			if (this.isOver) {
-				arr.push('to-float-over')
-			} else {
-				arr.push('to-float-over-false')
-			}
-			return arr
-		},
-		setStyle() {
-			let obj = {}
-			if (this.width && !this.slide) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			if (this.left) {
-				if (isNaN(this.left)) {
-					obj.left = this.left
-				} else {
-					obj.left = this.left + 'em'
-				}
-			}
-			if (this.top) {
-				if (isNaN(this.top)) {
-					obj.top = this.top
-				} else {
-					obj.top = this.top + 'em'
-				}
-			}
-			return obj
-		},
-		setContentClass() {
-			let arr = [];
-			if (this.fillet && this.fillet !== 'none') {
-				arr.push(`to-box-fillet-${this.fillet}`)
-			}
-			if (this.filletPosition) {
-				arr.push(`to-box-fillet-position-${this.filletPosition}`);
-			}
-			return arr
-		},
-		setContentStyle() {
-			let obj = {}
-			if (this.slide) {
-				if ((this.iposition === 'right' || this.iposition === 'left') && this.width) {
-					if (!isNaN(this.width)) {
-						obj.width = this.width + 'em';
-					} else if (this.width === 'full') {
-						obj.width = '100%';
-					} else {
-						obj.width = this.width;
-					}
-				}
-				if ((this.iposition === 'top' || this.iposition === 'bottom') && this.height) {
-					if (!isNaN(this.height)) {
-						obj.height = this.height + 'em';
-					} else if (this.height === 'full') {
-						obj.height = '100%';
-					} else {
-						obj.height = this.height;
-					}
-				}
-			}
-			return obj
-		}
-	},
-	watch: {
-		position: {
-			handler(val) {
-				this.iposition = val
-			},
-			immediate: true
-		},
-		align: {
-			handler(val) {
-				this.ialign = val
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	activated() {
-		this.init()
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	methods: {
-		init() {
-			// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
-			document.body.appendChild(this.$el)
-
-			// 获取当前实例 ref
-			this.ref = this.$vnode.data.ref
-			if (!this.slide) {
-				window.addEventListener('resize', this.resizeHandle, false)
-			}
-		},
-		destroy() {
-			if (!this.slide) {
-				// 销毁事件绑定
-				document.body.removeEventListener('mousedown', this.blur)
-				document.body.removeEventListener('touchstart', this.blur)
-				window.removeEventListener('resize', this.resizeHandle)
-			}
-
-			// 销毁移动过的 DOM
-			if (this.$el.parentNode) {
-				this.$el.parentNode.removeChild(this.$el)
-			}
-		},
-		resizeHandle() {
-			this.close()
-		},
-		// 设置位置、大小
-		set(link) {
-			// 重置 content 高度，这样下次打开的时候才好重新计算是否超过整体高度
-			if (this.slide) {
-				let timer = setTimeout(() => {
-					// 高度设置
-					if ((this.iposition === 'top' || this.iposition === 'bottom') && !this.height) {
-						this.$refs.content.style.height = ''
-						this.$refs.content.style.height = this.$refs.content.offsetHeight + 'px'
-					}
-					clearTimeout(timer)
-				}, 0);
-			} else if (this.link) {
-				this.$refs.content.style.height = ''
-				this.$nextTick(()=>{
-					// 宽度设置
-					if (!this.width) {
-						// 点击对象是 event 的时候
-						if (link.x || link.touches) {
-							this.$el.style.width = '14em'
-						} else {
-							this.$el.style.width = link.offsetWidth + 'px'
-						}
-					}
-					if (this.top === '' || this.left === '') {
-
-						// 计算因子计算
-						let x; // 横坐标
-						let y; // 纵坐标
-						let linkWidth; // 触点宽度
-						let linkHeight; // 触点高度
-						let contentWidth = this.$refs.content.offsetWidth; // 内容宽度
-						let contentHeight = this.$refs.content.offsetHeight; // 内容高度
-						let bodyWidth = document.body.offsetWidth;
-						let bodyHeight = document.body.offsetHeight;
-						let topSpace; // 顶部空间高度
-						let bottomSpace; // 底部空间高度
-						let leftSpace; // 左侧空间宽度
-						let rightSpace; // 右侧空间宽度
-						let useSpace // 使用的空间高度
-
-						// 传入的是触点
-						if (link.clientX || link.touches) {
-							x = link.clientX ? link.clientX : link.touches[0].clientX
-							y = link.clientY ? link.clientY : link.touches[0].clientY
-							linkWidth = 0
-							linkHeight = 0
-						}
-
-						// 传入的是目标
-						else {
-							x = link.getBoundingClientRect().left
-							y = link.getBoundingClientRect().top
-							linkWidth = link.offsetWidth
-							linkHeight = link.offsetHeight
-						}
-
-						// 空间计算
-						topSpace = y
-						bottomSpace = bodyHeight - y - linkHeight
-						leftSpace = x
-						rightSpace = bodyWidth - x - linkWidth
-
-						// 计算相对位置
-						if (this.position === 'auto') {
-
-							// 底部空间足够则从底部显示
-							if (bottomSpace >= contentHeight) {
-								this.iposition = 'bottom'
-							}
-
-							// 顶部空间足够则从顶部显示
-							else if (y >= contentHeight) {
-								this.iposition = 'top'
-							}
-
-							// 两边空间都不够就看哪边空间更大
-							else {
-								if ((y + linkHeight / 2) < (bodyHeight / 2)) {
-									this.iposition = 'bottom'
-								} else {
-									this.iposition = 'top'
-								}
-							}
-						}
-
-						// 自动计算对齐方式
-						if (this.align === 'auto') {
-
-							if (this.iposition === 'top' || this.iposition === 'bottom') {
-								// 右侧空间足够则在右侧显示
-								if (rightSpace >= contentWidth) {
-									this.ialign = 'left'
-								}
-
-								// 右侧空间不足则在左侧显示
-								else {
-									this.ialign = 'right'
-								}
-							} else {
-
-								// 顶部空间大
-								if ((y + linkHeight / 2) < (bodyHeight / 2)) {
-									this.ialign = 'top'
-								}
-
-								// 底部空间大
-								else {
-									this.ialign = 'bottom'
-								}
-							}
-						}
-
-						// 设置显示位置
-						if (this.iposition === 'top') {
-							this.$el.style.top = ''
-							this.$el.style.bottom = bottomSpace + linkHeight - 1 + 'px'
-						}
-						if (this.iposition === 'bottom') {
-							this.$el.style.top = topSpace + linkHeight - 1 + 'px'
-							this.$el.style.bottom = ''
-						}
-						if (this.iposition === 'top' || this.iposition === 'bottom') {
-							if (this.ialign === 'left') {
-								this.$el.style.left = leftSpace + 'px'
-								this.$el.style.right = ''
-							} else {
-								this.$el.style.right = rightSpace + 'px'
-								this.$el.style.left = ''
-							}
-						}
-						if (this.iposition === 'left') {
-							this.$el.style.right = rightSpace + linkWidth - 1 + 'px'
-							this.$el.style.left = ''
-						}
-						if (this.iposition === 'right') {
-							this.$el.style.left = leftSpace + linkWidth - 1 + 'px'
-							this.$el.style.right = ''
-						}
-						if (this.iposition === 'left' || this.iposition === 'right') {
-							if (this.ialign === 'bottom') {
-								this.$el.style.top = ''
-								this.$el.style.bottom = bottomSpace + 'px'
-							} else {
-								this.$el.style.top = topSpace + 'px'
-								this.$el.style.bottom = ''
-							}
-						}
-
-						// 计算使用空间
-						if (this.iposition === 'bottom') {
-							useSpace = bottomSpace
-							this.origin = 'top'
-						} else if (this.iposition === 'top') {
-							useSpace = topSpace
-							this.origin = 'bottom'
-						} else {
-							if (this.ialign === 'bottom') {
-								useSpace = topSpace + linkHeight
-								this.origin = 'bottom'
-							} else if (this.ialign === 'top') {
-								useSpace = bottomSpace + linkHeight
-								this.origin = 'top'
-							} else {
-								console.error('[ToFloat] 浮层对齐方式设置错误！position 在左右两侧时，对齐方式应是顶部或底部')
-							}
-						}
-
-						// 设置内容高度
-						if (useSpace < contentHeight) {
-							this.isOver = true
-							this.$refs.content.style.height = useSpace + 'px'
-						}
-					}
-				})
-			}
-
-		},
-
-		// 关闭
-		close() {
-			if (this.show && this.opened && this.$el) {
-				if (this.beforeClose) {
-					const fn = this.beforeClose()
-					// 如果是异步
-					if (fn && fn.then) {
-						fn.then(flag => {
-							this.closeAction()
-						})
-					} else {
-					// 是同步方法，则返回为 true 执行
-						if (fn) {
-							this.closeAction()
-						}
-					}
-				} else {
-					this.closeAction()
-				}
-			}
-		},
-		closeAction() {
-			// 重置 content 高度，这样下次打开的时候才好重新计算是否超过整体高度
-			if (!this.height) {
-				this.$refs.content.style.height = ''
-			}
-			this.isOver = false
-
-			// 关闭 float 后，移除事件监听
-			if (this.scrollNode) {
-				this.scrollNode.removeEventListener('scroll', this.close)
-			}
-			if (!this.$refs.content) { return }
-			this.$emit('beforeClose')
-			this.show = false;
-			this.opened = false;
-			if (this.$refs.content && this.$refs.content.style.height !== 'auto' && (this.iposition === 'top' || this.iposition === 'bottom') && !this.height) {
-				this.$refs.content.style.height = 'auto'
-			}
-			this.$emit('closed')
-			setTimeout(() => {
-				if (this.lazy) {
-					this.ifShow = false;
-				}
-			}, 300);
-		},
-
-		// 打开
-		open(by) {
-			if (!this.show && (!this.lazy || !this.ifShow)) {
-				this.$emit('beforeOpen')
-
-				if (!this.slide) {
-
-					// 点击层外关闭
-					document.body.addEventListener('mousedown', this.blur)
-					document.body.addEventListener('touchstart', this.blur)
-				}
-
-				if (!this.slide && by) {
-
-					// vc = vue component
-					let vc = this
-
-					if (by instanceof HTMLElement || by.clientX || (by.touches && by.touches[0].clientX)) {
-						this.link = by
-						if (by.clientX || (by.touches && by.touches[0].clientX)) {
-							this.event = 'contextmenu'
-						}
-						if (by.type === 'contextmenu') {
-							by.preventDefault()
-						}
-					} else if (by._isVue) {
-						// 直接传递 vue 组件
-						this.link = by.$el
-					} else {
-
-						// 递归向上寻找符合条件的 DOM
-						while (!vc.$refs[by] && vc._uid !== this.$root._uid) {
-							vc = vc.$parent
-						}
-						if (vc._uid !== this.$root._uid) {
-							if (Array.isArray(vc.$refs[by])) {
-								this.link = vc.$refs[by][0].$el
-							} else {
-								if (vc.$refs[by].$el) {
-									this.link = vc.$refs[by].$el
-								} else {
-									this.link = vc.$refs[by]
-								}
-							}
-						} else {
-							console.error('找不到符合条件的触发源')
-						}
-					}
-				}
-
-				// 显示 DOM 结构之后再打开
-				if (this.lazy) {
-					this.ifShow = true;
-				}
-				setTimeout(() => {
-					this.show = true;
-				}, 0);
-				this.$nextTick(() => {
-					this.set(this.link);
-					if (this.link && !this.link.x && !this.link.touches) {
-						this.setScrollStatus()
-					}
-					if (this.link) {
-						this.setMaskStyle()
-					}
-					// 设置 z-index
-					this.$el.style.zIndex = window.$TouchUI.zIndex
-					window.$TouchUI.zIndex++
-				})
-				// 显示
-				let timer = null
-				timer = setTimeout(() => {
-					this.$emit('opened')
-					this.opened = true
-					clearTimeout(timer)
-					timer = null
-				}, this.slide ? 300 : 0);
-			}
-		},
-
-		// 切换
-		toggle(by) {
-			if (this.show) {
-				this.close();
-			} else {
-				if (by) {
-					this.open(by);
-				} else {
-					this.open()
-				}
-			}
-		},
-
-		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
-		blur(e) {
-			if (!this.closeOnBlur) return
-			this.$nextTick(()=>{
-				let node = e.target
-				if (this.event === 'contextmenu') {
-					// 右键点击，任意位置均隐藏
-					while (node && node !== this.$el && node.nodeName !== 'BODY') {
-						node = node.parentNode
-					}
-				} else if (this.link.target) {
-					// $event 传递，target 需要获取
-					while (node && node !== this.$el && node !== this.link.target && node.nodeName !== 'BODY') {
-						node = node.parentNode
-					}
-				} else {
-					while (node && node !== this.$el && node !== this.link && node.nodeName !== 'BODY') {
-						node = node.parentNode
-					}
-				}
-				if (node && node.nodeName === 'BODY') {
-					this.close()
-				}
-			})
-		},
-		setScrollStatus() {
-			const searchNode = (Node) => {
-				if (Node.nodeName === 'BODY') {
-					return Node
-				} else {
-					if (Node.nodeName === 'DIV' && typeof Node.className === 'string' && Node.className.indexOf('to-scrollContent') > -1) {
-						return Node
-					} else {
-						return searchNode(Node.parentNode)
-					}
-				}
-			}
-			this.scrollNode = searchNode(this.link.parentNode)
-
-			if (this.scrollNode) {
-				// 鼠标滚动时，直接关闭 float
-				this.scrollNode.addEventListener('scroll', this.close)
-			}
-		},
-		// 设置遮罩层的样式
-		setMaskStyle() {
-			let Node
-			if (this.link.parentNode) {
-				const searchNode = (Node) => {
-					if (Node.nodeName === 'BODY') {
-						return Node
-					} else {
-						if (Node.nodeName === 'DIV' && typeof Node.className === 'string' && Node.className.indexOf('to-dialog') > -1) {
-							return Node
-						} else {
-							return searchNode(Node.parentNode)
-						}
-					}
-				}
-				Node = searchNode(this.link.parentNode)
-			}
-			// 如果是在 dialog 弹框中
-			if (Node && Node.className.indexOf('to-dialog') > -1 || this.$phone) {
-				this.$nextTick(()=>{
-					this.$refs.mask.style.width = '100vw'
-					this.$refs.mask.style.height = '100vh'
-					this.$refs.mask.style.position = 'fixed'
-					this.$refs.mask.style.left = parseInt(this.$el.style.left, 10) * -1 + 'px'
-
-					const top = parseInt(this.$el.style.top, 10)
-					const bottom = parseInt(this.$el.style.bottom, 10)
-					if (top) {
-						this.$refs.mask.style.top = top * -1 + 'px'
-					}
-					if (bottom) {
-						this.$refs.mask.style.bottom = bottom * -1 + 'px'
-					}
-				})
-			}
-		},
-		maskClickHandle() {
-			if (this.closeOnBlur) {
-				this.close()
-			}
-		}
-	}
-};
-</script>
+<template>
+	<div v-if="lazy ? ifShow : true" :class="setClass" :style="setStyle" @mousedown="$emit('mousedown')">
+		<div ref="mask" class="mask" @click="maskClickHandle"></div>
+		<div ref="content" class="content" :class="setContentClass" :style="setContentStyle">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ToFloat',
+	props: {
+		slide: Boolean,
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.float && this.$TouchUI.float.lazy === false) {
+					return false
+				} else {
+					return true
+				}
+			}
+		},
+		position: {
+			type: String,
+			default() {
+				return this.slide ? 'right' : 'auto'
+			}
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		height: {
+			type: [Number, String],
+			default: ''
+		},
+		left: {
+			type: [Number, String],
+			default: ''
+		},
+		top: {
+			type: [Number, String],
+			default: ''
+		},
+		align: {
+			type: String,
+			default: 'auto'
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// 是否可以通过点击 modal 关闭
+		closeOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		// normal 一般形式
+		// pill 药片形式
+		// round 圆球（不支持）
+		// none 无圆角
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.float.fillet || 'none'
+			}
+		},
+		// right / left / bottom / top
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		// 关闭前执行事件，以便通过判断阻止关闭
+		beforeClose: {
+			type: Function,
+			default: null
+		}
+	},
+	data() {
+		return {
+			origin: 'top',
+			ifShow: false,
+			show: false,
+			scrollNode: null, // 滚动的节点
+			iposition: '',
+			ialign: '',
+			link: null,
+			event: '',
+			opened: false,
+			isOver: false // 内容是否超过 float 本身的高度
+		}
+	},
+	computed: {
+		setClass() {
+			let arr = [];
+			if (this.show) {
+				arr.push('to-float-show')
+			}
+			if (this.slide) {
+				arr.push('to-float-slide')
+			} else {
+				arr.push('to-float')
+			}
+			if (this.iposition !== 'auto') {
+				arr.push(`to-float-position-${this.iposition}`)
+			}
+			if (this.origin === 'bottom') {
+				arr.push('to-float-origin-bottom')
+			}
+			if (!this.mask) {
+				arr.push('to-float-mask-false')
+			}
+			if (this.isOver) {
+				arr.push('to-float-over')
+			} else {
+				arr.push('to-float-over-false')
+			}
+			return arr
+		},
+		setStyle() {
+			let obj = {}
+			if (this.width && !this.slide) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			if (this.left) {
+				if (isNaN(this.left)) {
+					obj.left = this.left
+				} else {
+					obj.left = this.left + 'em'
+				}
+			}
+			if (this.top) {
+				if (isNaN(this.top)) {
+					obj.top = this.top
+				} else {
+					obj.top = this.top + 'em'
+				}
+			}
+			return obj
+		},
+		setContentClass() {
+			let arr = [];
+			if (this.fillet && this.fillet !== 'none') {
+				arr.push(`to-box-fillet-${this.fillet}`)
+			}
+			if (this.filletPosition) {
+				arr.push(`to-box-fillet-position-${this.filletPosition}`);
+			}
+			return arr
+		},
+		setContentStyle() {
+			let obj = {}
+			if (this.slide) {
+				if ((this.iposition === 'right' || this.iposition === 'left') && this.width) {
+					if (!isNaN(this.width)) {
+						obj.width = this.width + 'em';
+					} else if (this.width === 'full') {
+						obj.width = '100%';
+					} else {
+						obj.width = this.width;
+					}
+				}
+				if ((this.iposition === 'top' || this.iposition === 'bottom') && this.height) {
+					if (!isNaN(this.height)) {
+						obj.height = this.height + 'em';
+					} else if (this.height === 'full') {
+						obj.height = '100%';
+					} else {
+						obj.height = this.height;
+					}
+				}
+			}
+			return obj
+		}
+	},
+	watch: {
+		position: {
+			handler(val) {
+				this.iposition = val
+			},
+			immediate: true
+		},
+		align: {
+			handler(val) {
+				this.ialign = val
+			},
+			immediate: true
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	activated() {
+		this.init()
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	methods: {
+		init() {
+			// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
+			document.body.appendChild(this.$el)
+
+			// 获取当前实例 ref
+			this.ref = this.$vnode.data.ref
+			if (!this.slide) {
+				window.addEventListener('resize', this.resizeHandle, false)
+			}
+		},
+		destroy() {
+			if (!this.slide) {
+				// 销毁事件绑定
+				document.body.removeEventListener('mousedown', this.blur)
+				document.body.removeEventListener('touchstart', this.blur)
+				window.removeEventListener('resize', this.resizeHandle)
+			}
+
+			// 销毁移动过的 DOM
+			if (this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el)
+			}
+		},
+		resizeHandle() {
+			this.close()
+		},
+		// 设置位置、大小
+		set(link) {
+			// 重置 content 高度，这样下次打开的时候才好重新计算是否超过整体高度
+			if (this.slide) {
+				let timer = setTimeout(() => {
+					// 高度设置
+					if ((this.iposition === 'top' || this.iposition === 'bottom') && !this.height) {
+						this.$refs.content.style.height = ''
+						this.$refs.content.style.height = this.$refs.content.offsetHeight + 'px'
+					}
+					clearTimeout(timer)
+				}, 0);
+			} else if (this.link) {
+				this.$refs.content.style.height = ''
+				this.$nextTick(()=>{
+					// 宽度设置
+					if (!this.width) {
+						// 点击对象是 event 的时候
+						if (link.x || link.touches) {
+							this.$el.style.width = '14em'
+						} else {
+							this.$el.style.width = link.offsetWidth + 'px'
+						}
+					}
+					if (this.top === '' || this.left === '') {
+
+						// 计算因子计算
+						let x; // 横坐标
+						let y; // 纵坐标
+						let linkWidth; // 触点宽度
+						let linkHeight; // 触点高度
+						let contentWidth = this.$refs.content.offsetWidth; // 内容宽度
+						let contentHeight = this.$refs.content.offsetHeight; // 内容高度
+						let bodyWidth = document.body.offsetWidth;
+						let bodyHeight = document.body.offsetHeight;
+						let topSpace; // 顶部空间高度
+						let bottomSpace; // 底部空间高度
+						let leftSpace; // 左侧空间宽度
+						let rightSpace; // 右侧空间宽度
+						let useSpace // 使用的空间高度
+
+						// 传入的是触点
+						if (link.clientX || link.touches) {
+							x = link.clientX ? link.clientX : link.touches[0].clientX
+							y = link.clientY ? link.clientY : link.touches[0].clientY
+							linkWidth = 0
+							linkHeight = 0
+						}
+
+						// 传入的是目标
+						else {
+							x = link.getBoundingClientRect().left
+							y = link.getBoundingClientRect().top
+							linkWidth = link.offsetWidth
+							linkHeight = link.offsetHeight
+						}
+
+						// 空间计算
+						topSpace = y
+						bottomSpace = bodyHeight - y - linkHeight
+						leftSpace = x
+						rightSpace = bodyWidth - x - linkWidth
+
+						// 计算相对位置
+						if (this.position === 'auto') {
+
+							// 底部空间足够则从底部显示
+							if (bottomSpace >= contentHeight) {
+								this.iposition = 'bottom'
+							}
+
+							// 顶部空间足够则从顶部显示
+							else if (y >= contentHeight) {
+								this.iposition = 'top'
+							}
+
+							// 两边空间都不够就看哪边空间更大
+							else {
+								if ((y + linkHeight / 2) < (bodyHeight / 2)) {
+									this.iposition = 'bottom'
+								} else {
+									this.iposition = 'top'
+								}
+							}
+						}
+
+						// 自动计算对齐方式
+						if (this.align === 'auto') {
+
+							if (this.iposition === 'top' || this.iposition === 'bottom') {
+								// 右侧空间足够则在右侧显示
+								if (rightSpace >= contentWidth) {
+									this.ialign = 'left'
+								}
+
+								// 右侧空间不足则在左侧显示
+								else {
+									this.ialign = 'right'
+								}
+							} else {
+
+								// 顶部空间大
+								if ((y + linkHeight / 2) < (bodyHeight / 2)) {
+									this.ialign = 'top'
+								}
+
+								// 底部空间大
+								else {
+									this.ialign = 'bottom'
+								}
+							}
+						}
+
+						// 设置显示位置
+						if (this.iposition === 'top') {
+							this.$el.style.top = ''
+							this.$el.style.bottom = bottomSpace + linkHeight - 1 + 'px'
+						}
+						if (this.iposition === 'bottom') {
+							this.$el.style.top = topSpace + linkHeight - 1 + 'px'
+							this.$el.style.bottom = ''
+						}
+						if (this.iposition === 'top' || this.iposition === 'bottom') {
+							if (this.ialign === 'left') {
+								this.$el.style.left = leftSpace + 'px'
+								this.$el.style.right = ''
+							} else {
+								this.$el.style.right = rightSpace + 'px'
+								this.$el.style.left = ''
+							}
+						}
+						if (this.iposition === 'left') {
+							this.$el.style.right = rightSpace + linkWidth - 1 + 'px'
+							this.$el.style.left = ''
+						}
+						if (this.iposition === 'right') {
+							this.$el.style.left = leftSpace + linkWidth - 1 + 'px'
+							this.$el.style.right = ''
+						}
+						if (this.iposition === 'left' || this.iposition === 'right') {
+							if (this.ialign === 'bottom') {
+								this.$el.style.top = ''
+								this.$el.style.bottom = bottomSpace + 'px'
+							} else {
+								this.$el.style.top = topSpace + 'px'
+								this.$el.style.bottom = ''
+							}
+						}
+
+						// 计算使用空间
+						if (this.iposition === 'bottom') {
+							useSpace = bottomSpace
+							this.origin = 'top'
+						} else if (this.iposition === 'top') {
+							useSpace = topSpace
+							this.origin = 'bottom'
+						} else {
+							if (this.ialign === 'bottom') {
+								useSpace = topSpace + linkHeight
+								this.origin = 'bottom'
+							} else if (this.ialign === 'top') {
+								useSpace = bottomSpace + linkHeight
+								this.origin = 'top'
+							} else {
+								console.error('[ToFloat] 浮层对齐方式设置错误！position 在左右两侧时，对齐方式应是顶部或底部')
+							}
+						}
+
+						// 设置内容高度
+						if (useSpace < contentHeight) {
+							this.isOver = true
+							this.$refs.content.style.height = useSpace + 'px'
+						}
+					}
+				})
+			}
+
+		},
+
+		// 关闭
+		close() {
+			if (this.show && this.opened && this.$el) {
+				if (this.beforeClose) {
+					const fn = this.beforeClose()
+					// 如果是异步
+					if (fn && fn.then) {
+						fn.then(flag => {
+							this.closeAction()
+						})
+					} else {
+					// 是同步方法，则返回为 true 执行
+						if (fn) {
+							this.closeAction()
+						}
+					}
+				} else {
+					this.closeAction()
+				}
+			}
+		},
+		closeAction() {
+			// 重置 content 高度，这样下次打开的时候才好重新计算是否超过整体高度
+			if (!this.height) {
+				this.$refs.content.style.height = ''
+			}
+			this.isOver = false
+
+			// 关闭 float 后，移除事件监听
+			if (this.scrollNode) {
+				this.scrollNode.removeEventListener('scroll', this.close)
+			}
+			if (!this.$refs.content) { return }
+			this.$emit('beforeClose')
+			this.show = false;
+			this.opened = false;
+			if (this.$refs.content && this.$refs.content.style.height !== 'auto' && (this.iposition === 'top' || this.iposition === 'bottom') && !this.height) {
+				this.$refs.content.style.height = 'auto'
+			}
+			this.$emit('closed')
+			setTimeout(() => {
+				if (this.lazy) {
+					this.ifShow = false;
+				}
+			}, 300);
+		},
+
+		// 打开
+		open(by) {
+			if (!this.show && (!this.lazy || !this.ifShow)) {
+				this.$emit('beforeOpen')
+
+				if (!this.slide) {
+
+					// 点击层外关闭
+					document.body.addEventListener('mousedown', this.blur)
+					document.body.addEventListener('touchstart', this.blur)
+				}
+
+				if (!this.slide && by) {
+
+					// vc = vue component
+					let vc = this
+
+					if (by instanceof HTMLElement || by.clientX || (by.touches && by.touches[0].clientX)) {
+						this.link = by
+						if (by.clientX || (by.touches && by.touches[0].clientX)) {
+							this.event = 'contextmenu'
+						}
+						if (by.type === 'contextmenu') {
+							by.preventDefault()
+						}
+					} else if (by._isVue) {
+						// 直接传递 vue 组件
+						this.link = by.$el
+					} else {
+
+						// 递归向上寻找符合条件的 DOM
+						while (!vc.$refs[by] && vc._uid !== this.$root._uid) {
+							vc = vc.$parent
+						}
+						if (vc._uid !== this.$root._uid) {
+							if (Array.isArray(vc.$refs[by])) {
+								this.link = vc.$refs[by][0].$el
+							} else {
+								if (vc.$refs[by].$el) {
+									this.link = vc.$refs[by].$el
+								} else {
+									this.link = vc.$refs[by]
+								}
+							}
+						} else {
+							console.error('找不到符合条件的触发源')
+						}
+					}
+				}
+
+				// 显示 DOM 结构之后再打开
+				if (this.lazy) {
+					this.ifShow = true;
+				}
+				setTimeout(() => {
+					this.show = true;
+				}, 0);
+				this.$nextTick(() => {
+					this.set(this.link);
+					if (this.link && !this.link.x && !this.link.touches) {
+						this.setScrollStatus()
+					}
+					if (this.link) {
+						this.setMaskStyle()
+					}
+					// 设置 z-index
+					this.$el.style.zIndex = window.$TouchUI.zIndex
+					window.$TouchUI.zIndex++
+				})
+				// 显示
+				let timer = null
+				timer = setTimeout(() => {
+					this.$emit('opened')
+					this.opened = true
+					clearTimeout(timer)
+					timer = null
+				}, this.slide ? 300 : 0);
+			}
+		},
+
+		// 切换
+		toggle(by) {
+			if (this.show) {
+				this.close();
+			} else {
+				if (by) {
+					this.open(by);
+				} else {
+					this.open()
+				}
+			}
+		},
+
+		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
+		blur(e) {
+			if (!this.closeOnBlur) return
+			this.$nextTick(()=>{
+				let node = e.target
+				if (this.event === 'contextmenu') {
+					// 右键点击，任意位置均隐藏
+					while (node && node !== this.$el && node.nodeName !== 'BODY') {
+						node = node.parentNode
+					}
+				} else if (this.link.target) {
+					// $event 传递，target 需要获取
+					while (node && node !== this.$el && node !== this.link.target && node.nodeName !== 'BODY') {
+						node = node.parentNode
+					}
+				} else {
+					while (node && node !== this.$el && node !== this.link && node.nodeName !== 'BODY') {
+						node = node.parentNode
+					}
+				}
+				if (node && node.nodeName === 'BODY') {
+					this.close()
+				}
+			})
+		},
+		setScrollStatus() {
+			const searchNode = (Node) => {
+				if (Node.nodeName === 'BODY') {
+					return Node
+				} else {
+					if (Node.nodeName === 'DIV' && typeof Node.className === 'string' && Node.className.indexOf('to-scrollContent') > -1) {
+						return Node
+					} else {
+						return searchNode(Node.parentNode)
+					}
+				}
+			}
+			this.scrollNode = searchNode(this.link.parentNode)
+
+			if (this.scrollNode) {
+				// 鼠标滚动时，直接关闭 float
+				this.scrollNode.addEventListener('scroll', this.close)
+			}
+		},
+		// 设置遮罩层的样式
+		setMaskStyle() {
+			let Node
+			if (this.link.parentNode) {
+				const searchNode = (Node) => {
+					if (Node.nodeName === 'BODY') {
+						return Node
+					} else {
+						if (Node.nodeName === 'DIV' && typeof Node.className === 'string' && Node.className.indexOf('to-dialog') > -1) {
+							return Node
+						} else {
+							return searchNode(Node.parentNode)
+						}
+					}
+				}
+				Node = searchNode(this.link.parentNode)
+			}
+			// 如果是在 dialog 弹框中
+			if (Node && Node.className.indexOf('to-dialog') > -1 || this.$phone) {
+				this.$nextTick(()=>{
+					this.$refs.mask.style.width = '100vw'
+					this.$refs.mask.style.height = '100vh'
+					this.$refs.mask.style.position = 'fixed'
+					this.$refs.mask.style.left = parseInt(this.$el.style.left, 10) * -1 + 'px'
+
+					const top = parseInt(this.$el.style.top, 10)
+					const bottom = parseInt(this.$el.style.bottom, 10)
+					if (top) {
+						this.$refs.mask.style.top = top * -1 + 'px'
+					}
+					if (bottom) {
+						this.$refs.mask.style.bottom = bottom * -1 + 'px'
+					}
+				})
+			}
+		},
+		maskClickHandle() {
+			if (this.closeOnBlur) {
+				this.close()
+			}
+		}
+	}
+};
+</script>