ai.touchui-vue 1.31.3 → 1.32.0

package/packages/tooltip/src/tooltip.vue

@@ -1,467 +1,467 @@
-<template>
-	<div v-if="lazy ? show : true" class="to-tooltip" :class="setClass" :style="setStyle">
-		<div ref="arrow" class="arrow"></div>
-		<div ref="content" class="content">
-			<slot></slot>
-		</div>
-	</div>
-</template>
-<script>
-export default {
-	name: 'ToTooltip',
-	componentName: 'ToTooltip',
-	props: {
-		event: {
-			type: String,
-			default: ''
-		},
-		shadow: Boolean,
-		position: {
-			type: String,
-			default: 'auto'
-		},
-		align: {
-			type: String,
-			default: 'auto'
-		},
-		color: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.tooltip && this.$TouchUI.tooltip.lazy === false) {
-					return false
-				} else {
-					return true
-				}
-			}
-		},
-		closeOnBlur: { // 是否可以通过点击 modal 关闭 Tooltip
-			type: Boolean,
-			default: true
-		},
-		isScrollClose: { // 鼠标滚动时，是否关闭 tooltip
-			type: Boolean,
-			default: true
-		},
-		delay: {
-			type: [Number, String],
-			default: 0
-		}
-	},
-	data() {
-		return {
-			blurable: false,
-			ialign: '',
-			iarrow: '',
-			iposition: '',
-			show: false,
-			timer: null
-		}
-	},
-	computed: {
-		setClass() {
-			let arr = [];
-			if (this.shadow) {
-				arr.push('to-tooltip-shadow')
-			}
-			if (this.color) {
-				if (this.color !== 'radam') {
-					arr.push(`to-tooltip-color-${this.color}`);
-				} else {
-					let colors = this.$TouchUI.colors
-					let number = Math.round(Math.random() * 6)
-					arr.push(`to-tooltip-color-${ colors[number]}`);
-				}
-			}
-			if (this.iposition) {
-				arr.push(`to-tooltip-position-${this.iposition}`)
-			}
-			if (this.iarrow) {
-				arr.push(`to-tooltip-arrow-${this.iarrow}`)
-			}
-			if (this.show) {
-				arr.push('to-tooltip-show')
-			}
-			return arr
-		},
-		setStyle() {
-			let obj = {}
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj
-		}
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	beforeRouteLeave(to, from, next) {
-		// 在进行路由跳转时，取消 tooltip 的显示
-		let tooltipElementList = document.querySelectorAll('.to-tooltip')
-		for (let i = 0; i < tooltipElementList.length; i++) {
-			let element = tooltipElementList[i]
-			if (element.className.indexOf('to-tooltip-show') > -1) {
-				let classNameList = element.className.split(' ')
-				let index = classNameList.indexOf('to-tooltip-show')
-				classNameList.splice(index, 1)
-				let className = classNameList.join(' ')
-				element.setAttribute('class', className)
-			}
-		}
-		next()
-	},
-	methods: {
-		destroy() {
-			// 销毁事件绑定
-			if (document.body && document.body.removeEventListener) {
-				document.body.removeEventListener('click', this.blur)
-			}
-
-			if (this.scrollNode && this.scrollNode.removeEventListener) {
-				this.scrollNode.removeEventListener('scroll', this.close)
-			}
-
-			// 销毁移动过的 DOM
-			if (this.$el.parentNode) {
-				this.$el.parentNode.removeChild(this.$el)
-			}
-
-			if (this.timer) {
-				clearTimeout(this.timer)
-				this.timer = null
-			}
-		},
-		set(link) {
-
-			// 整体参数
-			const bodyHeight = document.body.clientHeight
-			const bodyWidth = document.body.clientWidth
-
-			// 目标参数
-			const linkHeight = link.offsetHeight
-			const linkWidth = link.offsetWidth
-			const linkTop = link.getBoundingClientRect().top
-			const linkLeft = link.getBoundingClientRect().left
-			const linkBottom = bodyHeight - linkTop - linkHeight
-			const linkRight = bodyWidth - linkLeft - linkWidth
-			const linkX = linkLeft + linkWidth / 2
-			const linkY = linkTop + linkHeight / 2
-			const arrowSize = this.$refs.arrow.offsetHeight
-
-			// 提示参数
-			let tipWidth = this.$refs.content.offsetWidth
-			let tipHeight = this.$refs.content.offsetHeight
-
-			// 已定义直接取值
-			if (this.position !== 'auto') {
-				this.iposition = this.position
-			}
-
-			// 未定义位置则需要计算从上还是从下弹出
-			else {
-
-				// 顶部空间足够则从顶部显示
-				if (linkTop >= tipHeight + arrowSize / 2) {
-					this.iposition = 'top'
-				}
-
-				// 底部空间足够则从底部显示
-				else if (linkBottom >= tipHeight + arrowSize / 2) {
-					this.iposition = 'bottom'
-				}
-
-				// 顶部底部空间都不足够时，放在文档顶部
-				else {
-					this.iposition = 'top-ab'
-				}
-
-			}
-
-			// 计算提示对齐方式
-			if (this.align !== 'auto') {
-				this.ialign = this.align
-			} else {
-
-				// 位置在上下的情况
-				if (this.iposition === 'top' || this.iposition === 'bottom') {
-
-					// 不能居中完整显示则看哪边空间大
-					if ((tipWidth / 2 > linkLeft + linkWidth / 2 || tipWidth / 2 > linkRight + linkWidth / 2) && tipWidth > linkWidth) {
-						if (linkLeft > linkRight) {
-							this.ialign = 'right'
-						} else {
-							this.ialign = 'left'
-						}
-					}
-
-					// 能居中完整显示则居中完整显示
-					else {
-						this.ialign = 'center'
-					}
-				}
-
-				// 位置在左右的情况
-				else {
-
-					// 不能居中完整显示则看哪边空间大
-					if ((tipHeight / 2 > linkTop + linkHeight / 2 || tipHeight / 2 > linkBottom + linkHeight / 2) && tipHeight > linkHeight) {
-						if (linkTop > linkBottom) {
-							this.ialign = 'bottom'
-						} else {
-							this.ialign = 'top'
-						}
-					}
-
-					// 能居中完整显示则居中完整显示
-					else {
-						this.ialign = 'middle'
-					}
-				}
-
-			}
-
-			// 计算箭头对齐方式
-			if ((this.ialign === 'top' || this.ialign === 'bottom' || this.ialign === 'middle') && (tipHeight < linkHeight)) {
-				this.iarrow = 'middle'
-			}
-			else if ((this.ialign === 'left' || this.ialign === 'right' || this.ialign === 'center') && (tipWidth < linkWidth)) {
-				this.iarrow = 'center'
-			}
-			else {
-				this.iarrow = this.ialign
-			}
-
-			// 计算位置
-			this.$nextTick(() => {
-
-				// 因为 position 会导致 tip 高宽的变化，设置前需要重新获取一次
-				tipWidth = this.$el.offsetWidth
-				tipHeight = this.$el.offsetHeight
-				this.$refs.arrow.style.left = ''
-				this.$refs.arrow.style.right = ''
-				this.$refs.arrow.style.top = ''
-				this.$refs.arrow.style.bottom = ''
-				this.$el.style.left = ''
-				this.$el.style.right = ''
-				this.$el.style.top = ''
-				this.$el.style.bottom = ''
-
-				if (this.iposition === 'top-ab') {
-					this.$el.style.top = 0
-				}
-				if (this.iposition === 'top') {
-					this.$el.style.top = linkTop - tipHeight + 'px'
-				}
-				if (this.iposition === 'bottom') {
-					this.$el.style.top = linkTop + linkHeight + 'px'
-				}
-				if (this.iposition === 'left') {
-					this.$el.style.left = linkLeft - tipWidth + 'px'
-				}
-				if (this.iposition === 'right') {
-					this.$el.style.left = linkLeft + linkWidth + 'px'
-				}
-
-				if (this.ialign === 'left') {
-					this.$el.style.left = linkLeft + 'px'
-					this.$refs.arrow.style.left = linkWidth / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.ialign === 'right') {
-					this.$el.style.left = bodyWidth - tipWidth - linkRight + 'px'
-					this.$refs.arrow.style.right = linkWidth / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.ialign === 'center') {
-					this.$el.style.left = linkX - tipWidth / 2 + 'px'
-					this.$refs.arrow.style.left = ''
-					this.$refs.arrow.style.right = ''
-				}
-				if (this.ialign === 'top') {
-					this.$el.style.top = linkTop + 'px'
-					this.$refs.arrow.style.top = linkHeight / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.ialign === 'bottom') {
-					this.$el.style.top = linkTop - tipHeight + linkHeight + 'px'
-					this.$refs.arrow.style.bottom = linkHeight / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.ialign === 'middle') {
-					this.$el.style.top = linkY - tipHeight / 2 + 'px'
-					this.$refs.arrow.style.top = ''
-					this.$refs.arrow.style.bottom = ''
-				}
-
-				if (this.iarrow === 'left') {
-					this.$refs.arrow.style.left = linkWidth / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.iarrow === 'right') {
-					this.$refs.arrow.style.right = linkWidth / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.iarrow === 'center') {
-					this.$refs.arrow.style.left = ''
-					this.$refs.arrow.style.right = ''
-				}
-				if (this.iarrow === 'top') {
-					this.$refs.arrow.style.top = linkHeight / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.iarrow === 'bottom') {
-					this.$refs.arrow.style.bottom = linkHeight / 2 - arrowSize / 2 + 'px'
-				}
-				if (this.iarrow === 'middle') {
-					this.$refs.arrow.style.top = ''
-					this.$refs.arrow.style.bottom = ''
-				}
-			})
-
-		},
-		open(by) {
-			// 延时显示
-			if (this.delay) {
-				if (this.timer) {
-					clearTimeout(this.timer);
-					this.timer = null
-				}
-				this.timer = setTimeout(() => {
-					this.openHandle(by)
-				}, this.delay);
-			} else {
-				this.openHandle(by)
-			}
-		},
-		openHandle(by) {
-			this.$emit('beforeOpen')
-			this.blurable = false
-			if (!by) { return}
-
-			// vc = vue component
-			let vc = this
-
-			if (by instanceof HTMLElement) {
-				// directive 中传入 DOM
-				this.link = by
-			} else if (document.getElementById(by) && document.getElementById(by) instanceof HTMLElement) {
-				this.link = document.getElementById(by)
-			} else if (by._isVue) {
-				// 直接传递 vue 组件
-				this.link = by.$el
-			} else {
-				// Vue 模块中传入 ref
-				// 递归向上寻找符合条件的 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('找不到符合条件的触发源')
-				}
-			}
-			this.show = true
-			this.$nextTick(() => {
-				// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
-				document.body.appendChild(this.$el)
-
-				// 点击层外关闭
-				document.body.addEventListener('click', this.blur)
-				this.set(this.link);
-				if (this.link && this.isScrollClose) {
-					this.setScrollStatus()
-				}
-				// 设置 z-index
-				this.$el.style.zIndex = window.$TouchUI.zIndex
-				window.$TouchUI.zIndex++
-			})
-
-			// 防止点开后立即因为 blur 事件而关闭掉
-			let timer = null
-			timer = setTimeout(() => {
-				this.blurable = true
-				clearTimeout(timer)
-				timer = null
-			}, 100);
-
-			// 显示
-			this.$emit('opened')
-		},
-		close() {
-			if (this.delay) {
-				if (this.timer) {
-					clearTimeout(this.timer)
-					this.timer = null
-				}
-				this.timer = setTimeout(() => {
-					this.closeHandle()
-				}, 500);
-			} else {
-				this.closeHandle()
-			}
-		},
-		closeHandle() {
-			this.show = false
-			if (this.scrollNode && this.scrollNode.removeEventListener) {
-				this.scrollNode.removeEventListener('scroll', 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) {
-				// 鼠标滚动时，直接关闭
-				// 设置延时是因为表单校验的时候，获取焦点同时要展示 tooltip，获取焦点的对象如果只有半边在视角以内，则会自动触发滚动条滚动事件
-				let timer = null
-				timer = setTimeout(() => {
-					this.scrollNode.addEventListener('scroll', this.close)
-					clearTimeout(timer)
-					timer = null
-				}, 0);
-			}
-		},
-		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
-		blur(e) {
-			if (!this.$el || !this.blurable || !this.closeOnBlur) return
-			this.$nextTick(()=>{
-				let node = e.target
-				while (node && node !== this.$el && node !== this.link && node.nodeName !== 'BODY') {
-					node = node.parentNode
-				}
-				if (node && node.nodeName === 'BODY') {
-					this.close()
-				}
-			})
-		}
-	}
-};
-</script>
+<template>
+	<div v-if="lazy ? show : true" class="to-tooltip" :class="setClass" :style="setStyle">
+		<div ref="arrow" class="arrow"></div>
+		<div ref="content" class="content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ToTooltip',
+	componentName: 'ToTooltip',
+	props: {
+		event: {
+			type: String,
+			default: ''
+		},
+		shadow: Boolean,
+		position: {
+			type: String,
+			default: 'auto'
+		},
+		align: {
+			type: String,
+			default: 'auto'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.tooltip && this.$TouchUI.tooltip.lazy === false) {
+					return false
+				} else {
+					return true
+				}
+			}
+		},
+		closeOnBlur: { // 是否可以通过点击 modal 关闭 Tooltip
+			type: Boolean,
+			default: true
+		},
+		isScrollClose: { // 鼠标滚动时，是否关闭 tooltip
+			type: Boolean,
+			default: true
+		},
+		delay: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			blurable: false,
+			ialign: '',
+			iarrow: '',
+			iposition: '',
+			show: false,
+			timer: null
+		}
+	},
+	computed: {
+		setClass() {
+			let arr = [];
+			if (this.shadow) {
+				arr.push('to-tooltip-shadow')
+			}
+			if (this.color) {
+				if (this.color !== 'radam') {
+					arr.push(`to-tooltip-color-${this.color}`);
+				} else {
+					let colors = this.$TouchUI.colors
+					let number = Math.round(Math.random() * 6)
+					arr.push(`to-tooltip-color-${ colors[number]}`);
+				}
+			}
+			if (this.iposition) {
+				arr.push(`to-tooltip-position-${this.iposition}`)
+			}
+			if (this.iarrow) {
+				arr.push(`to-tooltip-arrow-${this.iarrow}`)
+			}
+			if (this.show) {
+				arr.push('to-tooltip-show')
+			}
+			return arr
+		},
+		setStyle() {
+			let obj = {}
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj
+		}
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	beforeRouteLeave(to, from, next) {
+		// 在进行路由跳转时，取消 tooltip 的显示
+		let tooltipElementList = document.querySelectorAll('.to-tooltip')
+		for (let i = 0; i < tooltipElementList.length; i++) {
+			let element = tooltipElementList[i]
+			if (element.className.indexOf('to-tooltip-show') > -1) {
+				let classNameList = element.className.split(' ')
+				let index = classNameList.indexOf('to-tooltip-show')
+				classNameList.splice(index, 1)
+				let className = classNameList.join(' ')
+				element.setAttribute('class', className)
+			}
+		}
+		next()
+	},
+	methods: {
+		destroy() {
+			// 销毁事件绑定
+			if (document.body && document.body.removeEventListener) {
+				document.body.removeEventListener('click', this.blur)
+			}
+
+			if (this.scrollNode && this.scrollNode.removeEventListener) {
+				this.scrollNode.removeEventListener('scroll', this.close)
+			}
+
+			// 销毁移动过的 DOM
+			if (this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el)
+			}
+
+			if (this.timer) {
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		set(link) {
+
+			// 整体参数
+			const bodyHeight = document.body.clientHeight
+			const bodyWidth = document.body.clientWidth
+
+			// 目标参数
+			const linkHeight = link.offsetHeight
+			const linkWidth = link.offsetWidth
+			const linkTop = link.getBoundingClientRect().top
+			const linkLeft = link.getBoundingClientRect().left
+			const linkBottom = bodyHeight - linkTop - linkHeight
+			const linkRight = bodyWidth - linkLeft - linkWidth
+			const linkX = linkLeft + linkWidth / 2
+			const linkY = linkTop + linkHeight / 2
+			const arrowSize = this.$refs.arrow.offsetHeight
+
+			// 提示参数
+			let tipWidth = this.$refs.content.offsetWidth
+			let tipHeight = this.$refs.content.offsetHeight
+
+			// 已定义直接取值
+			if (this.position !== 'auto') {
+				this.iposition = this.position
+			}
+
+			// 未定义位置则需要计算从上还是从下弹出
+			else {
+
+				// 顶部空间足够则从顶部显示
+				if (linkTop >= tipHeight + arrowSize / 2) {
+					this.iposition = 'top'
+				}
+
+				// 底部空间足够则从底部显示
+				else if (linkBottom >= tipHeight + arrowSize / 2) {
+					this.iposition = 'bottom'
+				}
+
+				// 顶部底部空间都不足够时，放在文档顶部
+				else {
+					this.iposition = 'top-ab'
+				}
+
+			}
+
+			// 计算提示对齐方式
+			if (this.align !== 'auto') {
+				this.ialign = this.align
+			} else {
+
+				// 位置在上下的情况
+				if (this.iposition === 'top' || this.iposition === 'bottom') {
+
+					// 不能居中完整显示则看哪边空间大
+					if ((tipWidth / 2 > linkLeft + linkWidth / 2 || tipWidth / 2 > linkRight + linkWidth / 2) && tipWidth > linkWidth) {
+						if (linkLeft > linkRight) {
+							this.ialign = 'right'
+						} else {
+							this.ialign = 'left'
+						}
+					}
+
+					// 能居中完整显示则居中完整显示
+					else {
+						this.ialign = 'center'
+					}
+				}
+
+				// 位置在左右的情况
+				else {
+
+					// 不能居中完整显示则看哪边空间大
+					if ((tipHeight / 2 > linkTop + linkHeight / 2 || tipHeight / 2 > linkBottom + linkHeight / 2) && tipHeight > linkHeight) {
+						if (linkTop > linkBottom) {
+							this.ialign = 'bottom'
+						} else {
+							this.ialign = 'top'
+						}
+					}
+
+					// 能居中完整显示则居中完整显示
+					else {
+						this.ialign = 'middle'
+					}
+				}
+
+			}
+
+			// 计算箭头对齐方式
+			if ((this.ialign === 'top' || this.ialign === 'bottom' || this.ialign === 'middle') && (tipHeight < linkHeight)) {
+				this.iarrow = 'middle'
+			}
+			else if ((this.ialign === 'left' || this.ialign === 'right' || this.ialign === 'center') && (tipWidth < linkWidth)) {
+				this.iarrow = 'center'
+			}
+			else {
+				this.iarrow = this.ialign
+			}
+
+			// 计算位置
+			this.$nextTick(() => {
+
+				// 因为 position 会导致 tip 高宽的变化，设置前需要重新获取一次
+				tipWidth = this.$el.offsetWidth
+				tipHeight = this.$el.offsetHeight
+				this.$refs.arrow.style.left = ''
+				this.$refs.arrow.style.right = ''
+				this.$refs.arrow.style.top = ''
+				this.$refs.arrow.style.bottom = ''
+				this.$el.style.left = ''
+				this.$el.style.right = ''
+				this.$el.style.top = ''
+				this.$el.style.bottom = ''
+
+				if (this.iposition === 'top-ab') {
+					this.$el.style.top = 0
+				}
+				if (this.iposition === 'top') {
+					this.$el.style.top = linkTop - tipHeight + 'px'
+				}
+				if (this.iposition === 'bottom') {
+					this.$el.style.top = linkTop + linkHeight + 'px'
+				}
+				if (this.iposition === 'left') {
+					this.$el.style.left = linkLeft - tipWidth + 'px'
+				}
+				if (this.iposition === 'right') {
+					this.$el.style.left = linkLeft + linkWidth + 'px'
+				}
+
+				if (this.ialign === 'left') {
+					this.$el.style.left = linkLeft + 'px'
+					this.$refs.arrow.style.left = linkWidth / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.ialign === 'right') {
+					this.$el.style.left = bodyWidth - tipWidth - linkRight + 'px'
+					this.$refs.arrow.style.right = linkWidth / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.ialign === 'center') {
+					this.$el.style.left = linkX - tipWidth / 2 + 'px'
+					this.$refs.arrow.style.left = ''
+					this.$refs.arrow.style.right = ''
+				}
+				if (this.ialign === 'top') {
+					this.$el.style.top = linkTop + 'px'
+					this.$refs.arrow.style.top = linkHeight / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.ialign === 'bottom') {
+					this.$el.style.top = linkTop - tipHeight + linkHeight + 'px'
+					this.$refs.arrow.style.bottom = linkHeight / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.ialign === 'middle') {
+					this.$el.style.top = linkY - tipHeight / 2 + 'px'
+					this.$refs.arrow.style.top = ''
+					this.$refs.arrow.style.bottom = ''
+				}
+
+				if (this.iarrow === 'left') {
+					this.$refs.arrow.style.left = linkWidth / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.iarrow === 'right') {
+					this.$refs.arrow.style.right = linkWidth / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.iarrow === 'center') {
+					this.$refs.arrow.style.left = ''
+					this.$refs.arrow.style.right = ''
+				}
+				if (this.iarrow === 'top') {
+					this.$refs.arrow.style.top = linkHeight / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.iarrow === 'bottom') {
+					this.$refs.arrow.style.bottom = linkHeight / 2 - arrowSize / 2 + 'px'
+				}
+				if (this.iarrow === 'middle') {
+					this.$refs.arrow.style.top = ''
+					this.$refs.arrow.style.bottom = ''
+				}
+			})
+
+		},
+		open(by) {
+			// 延时显示
+			if (this.delay) {
+				if (this.timer) {
+					clearTimeout(this.timer);
+					this.timer = null
+				}
+				this.timer = setTimeout(() => {
+					this.openHandle(by)
+				}, this.delay);
+			} else {
+				this.openHandle(by)
+			}
+		},
+		openHandle(by) {
+			this.$emit('beforeOpen')
+			this.blurable = false
+			if (!by) { return}
+
+			// vc = vue component
+			let vc = this
+
+			if (by instanceof HTMLElement) {
+				// directive 中传入 DOM
+				this.link = by
+			} else if (document.getElementById(by) && document.getElementById(by) instanceof HTMLElement) {
+				this.link = document.getElementById(by)
+			} else if (by._isVue) {
+				// 直接传递 vue 组件
+				this.link = by.$el
+			} else {
+				// Vue 模块中传入 ref
+				// 递归向上寻找符合条件的 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('找不到符合条件的触发源')
+				}
+			}
+			this.show = true
+			this.$nextTick(() => {
+				// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
+				document.body.appendChild(this.$el)
+
+				// 点击层外关闭
+				document.body.addEventListener('click', this.blur)
+				this.set(this.link);
+				if (this.link && this.isScrollClose) {
+					this.setScrollStatus()
+				}
+				// 设置 z-index
+				this.$el.style.zIndex = window.$TouchUI.zIndex
+				window.$TouchUI.zIndex++
+			})
+
+			// 防止点开后立即因为 blur 事件而关闭掉
+			let timer = null
+			timer = setTimeout(() => {
+				this.blurable = true
+				clearTimeout(timer)
+				timer = null
+			}, 100);
+
+			// 显示
+			this.$emit('opened')
+		},
+		close() {
+			if (this.delay) {
+				if (this.timer) {
+					clearTimeout(this.timer)
+					this.timer = null
+				}
+				this.timer = setTimeout(() => {
+					this.closeHandle()
+				}, 500);
+			} else {
+				this.closeHandle()
+			}
+		},
+		closeHandle() {
+			this.show = false
+			if (this.scrollNode && this.scrollNode.removeEventListener) {
+				this.scrollNode.removeEventListener('scroll', 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) {
+				// 鼠标滚动时，直接关闭
+				// 设置延时是因为表单校验的时候，获取焦点同时要展示 tooltip，获取焦点的对象如果只有半边在视角以内，则会自动触发滚动条滚动事件
+				let timer = null
+				timer = setTimeout(() => {
+					this.scrollNode.addEventListener('scroll', this.close)
+					clearTimeout(timer)
+					timer = null
+				}, 0);
+			}
+		},
+		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
+		blur(e) {
+			if (!this.$el || !this.blurable || !this.closeOnBlur) return
+			this.$nextTick(()=>{
+				let node = e.target
+				while (node && node !== this.$el && node !== this.link && node.nodeName !== 'BODY') {
+					node = node.parentNode
+				}
+				if (node && node.nodeName === 'BODY') {
+					this.close()
+				}
+			})
+		}
+	}
+};
+</script>