ai.touchui-vue 1.30.2 → 1.30.3

package/packages/scroll/src/scroll.vue

@@ -1,381 +1,381 @@
-<template>
-	<div class="to-scroll to-scroll-mode-plain" :class="setClass" :style="setStyle">
-		<div ref="content" class="to-scrollContent" :style="setContentStyle" @scroll="scroll($event)" @mousewheel="wheel($event)">
-			<slot></slot>
-			<div v-if="padding && paddingPosition !== 'side' && paddingPosition !== 'n'" :style="{height:padding+'em'}"></div>
-		</div>
-		<div v-if="vitrual" v-show="effect" ref="bar" class="to-scrollBar" :style="{'height': barHeight + '%', 'top': barTop + '%'}"></div>
-	</div>
-</template>
-<script>
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-export default {
-	name: 'ToScroll',
-	componentName: 'ToScroll',
-	mixins: [Locale],
-	model: {
-		event: 'change'
-	},
-	provide() {
-		return {
-			ToScroll: this
-		}
-	},
-	inject: {
-		ToScroll: {
-			default: ''
-		}
-	},
-	props: {
-		vitrual: Boolean,
-		value: {
-			type: [String, Number],
-			default() {
-				return 0
-			}
-		},
-		speed: {
-			type: [Number, String],
-			default: 10
-		},
-		top: {
-			type: [Number, String],
-			default: null
-		},
-		padding: {
-			type: [Number, String],
-			default: 0
-		},
-		paddingPosition: {
-			type: String,
-			default: ''
-		},
-		bottom: {
-			type: [Number, String],
-			default: null
-		},
-		height: {
-			type: [Number, String],
-			default: '100%'
-		},
-		barDisplay: {
-			type: String,
-			default: 'always'
-		},
-		except: {
-			type: [Array, String],
-			default() {
-				return ''
-			}
-		},
-		// 支持 info / bg
-		color: {
-			type: String,
-			default: ''
-		},
-		test: Boolean
-	},
-	data() {
-		return {
-			changeFrom: 'outer',
-			points: [],
-			stickies: [],
-			timer: null,
-			effect: false,
-			barTop: 0,
-			barHeight: 0,
-			diff: 0,
-			position: 0,
-			overagePercent: 0,
-			offsetHeight: 0,
-			scrollHeight: 0,
-			old_offsetHeight: 0,
-			offsetTop: 0,
-			offsetBottom: 0
-		}
-	},
-	computed: {
-		setContentStyle() {
-			let obj = {}
-			if (this.position !== 0) {
-				obj.marginTop = this.position + 'px'
-			}
-			if (this.padding) {
-				// overflow:auto + padding-bottom 在所谓的标准下是失效的
-				const p = this.padding
-				obj.padding = `${p}em ${p}em 0 ${p}em`
-			}
-			if (this.paddingPosition === 'u' || this.paddingPosition === 'side') {
-				obj.paddingTop = 0;
-			}
-			if (this.paddingPosition === 'c') {
-				obj.paddingRight = 0;
-			}
-			if (this.paddingPosition === 'ɔ') {
-				obj.paddingLeft = 0;
-			}
-			return obj
-		},
-		setClass() {
-			let arr = []
-			if (this.vitrual) {
-				arr.push('to-scroll-vitrual')
-			}
-			if (this.barDisplay === 'hover') {
-				arr.push('to-scroll-bar-hover')
-			}
-			if (this.barDisplay === 'none') {
-				arr.push('to-scroll-bar-none')
-			}
-			if (typeof this.except === 'string' && this.except) {
-				arr.push('to-scroll-float')
-				arr.push(`to-scroll-except-${this.except}`)
-			}
-			if (this.top !== null || this.bottom !== null) {
-				arr.push('to-scroll-float')
-			}
-			if (Array.isArray(this.except) && this.except.length > 0) {
-				arr.push('to-scroll-float')
-				this.except.forEach(el => {
-					arr.push(`to-scroll-except-${el}`)
-				});
-			}
-			if (this.color) {
-				arr.push(`to-scroll-color-${this.color}`)
-			}
-			return arr
-		},
-		setStyle() {
-			let obj = {}
-			if (!isNaN(this.top)) {
-				obj.top = this.top + 'em'
-			} else {
-				obj.top = this.top
-			}
-			if (!isNaN(this.bottom)) {
-				obj.bottom = this.bottom + 'em'
-			} else {
-				obj.bottom = this.bottom
-			}
-			if (this.height && !this.except) {
-				if (!isNaN(this.height)) {
-					obj.height = this.height + 'em';
-				} else if (this.height === 'full') {
-					obj.height = '100%';
-				} else if (!this.top && !this.bottom) {
-					obj.height = this.height;
-				}
-			}
-			return obj
-		}
-	},
-	watch: {
-		value(val) {
-			let timer = setTimeout(() => {
-				if (this.points && this.points.length > 0 && this.changeFrom === 'outer') {
-					const node = this.points.find(item => item.value === val)
-					if (node) {
-						this.$refs.content.scrollTo(0, node.start + 1)
-					}
-				}
-				clearTimeout(timer)
-			}, 200);
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	created() {
-		window.addEventListener('resize', this.init)
-	},
-	activated() {
-		window.addEventListener('resize', this.init)
-	},
-	destroyed() {
-		window.removeEventListener('resize', this.init)
-	},
-	deactivated() {
-		window.removeEventListener('resize', this.init)
-	},
-	methods: {
-		init() {
-			if (this.vitrual) {
-				const that = this
-				let timer = null
-				timer = setTimeout(() => {
-					if (that.$el && that.$refs.content) {
-						if (that.$el.offsetHeight < that.$refs.content.offsetHeight) {
-							that.effect = true;
-						}
-						that.barHeight = that.$el.offsetHeight / that.$refs.content.offsetHeight * 100
-						that.diff = that.$el.offsetHeight - that.$refs.content.offsetHeight
-						if (that.position < 0 && (that.$refs.content.offsetHeight < that.old_offsetHeight)) {
-							that.position = that.position - (that.$refs.content.offsetHeight - that.old_offsetHeight)
-						}
-						that.position = that.position < 0 ? that.position : 0
-						that.old_offsetHeight = that.$refs.content.offsetHeight
-						that.overagePercent = 100 - (that.$el.offsetHeight / that.$refs.content.offsetHeight) * 100
-
-						clearTimeout(timer)
-						timer = null
-					}
-				}, 100);
-			}
-
-			// 计算断点
-			if (this.value !== 0) {
-				let pointTimer = null
-				pointTimer = setTimeout(() => {
-					this.setPoints()
-
-					// 默认显示到指定位置
-					if (this.points && this.points.length > 0) {
-						const node = this.points.find(item => item.value === this.value)
-						if (node) {
-							this.$refs.content.scrollTo(0, node.start + 1)
-						}
-					}
-
-					clearTimeout(pointTimer)
-				}, 500);
-			}
-
-			setTimeout(() => {
-
-				// 计算初始化数据
-				this.offsetHeight = this.$refs.content.offsetHeight
-				this.scrollHeight = this.$refs.content.scrollHeight
-				this.scrollerTop = this.$el.getBoundingClientRect().top
-
-				// 计算粘连点
-				this.setStickies()
-			}, 500);
-		},
-		setPoints() {
-			if (!this.$refs.content) return
-			this.points = []
-			const nodes = this.$refs.content.querySelectorAll('.to-scrollPoint')
-			if (nodes && nodes.length > 0) {
-				nodes.forEach((item, index) => {
-					const vm = item.__vue__
-					this.points.push(
-						{
-							value: vm.value,
-							start: item.offsetTop,
-							end: index === nodes.length - 1 ? item.offsetTop + item.offsetHeight : nodes[index + 1].offsetTop - 1
-						}
-					)
-				})
-			}
-		},
-		// 设置 stikies
-		setStickies() {
-			if (!this.$refs.content) return
-			this.stickies = []
-			const nodes = this.$refs.content.querySelectorAll(':scope .to-scrollSticky:not(:scope .to-scroll .to-scrollSticky)')
-			if (nodes && nodes.length > 0) {
-				nodes.forEach(item => {
-					this.stickies.push(item.__vue__)
-				})
-			}
-		},
-		setSticky() {
-			if (this.stickies && this.stickies.length) {
-				const scrollerTop = this.$el.getBoundingClientRect().top
-				for (let i = 0; i < this.stickies.length; i++) {
-					const node = this.stickies[i]
-					const stickyTop = node.$el.getBoundingClientRect().top
-					const stickyHeight = node.$el.offsetHeight
-					const isTop = node.top !== 'auto' && stickyTop - node.top * this.$TouchUI.em() <= scrollerTop + 1
-					const isBottom = node.bottom !== 'auto' && scrollerTop + this.offsetHeight - node.bottom * this.$TouchUI.em() - stickyHeight <= stickyTop + 1
-					if (isTop || isBottom) {
-						node.sticky = true
-					} else {
-						node.sticky = false
-					}
-				}
-			}
-		},
-		scroll(e) {
-			if (this.$listeners.scroll) {
-				this.$emit('scroll', this.$refs.content)
-			}
-			this.changeFrom = 'inner'
-			if (this.$listeners.bottom || (this.points && this.points.length > 0)) {
-
-				// 触底事件
-				const catchBottom = this.$refs.content.scrollTop + this.offsetHeight + 5 >= this.scrollHeight
-				if (catchBottom) {
-					this.$emit('bottom')
-				}
-
-				// 定位方法
-				if (this.value !== 0 && this.points && this.points.length > 0) {
-					if (catchBottom) {
-						this.$emit('change', this.points[this.points.length - 1].value)
-					} else {
-						this.$emit('change', this.findInterval(this.points, this.$refs.content.scrollTop))
-					}
-				}
-			}
-
-			this.setSticky()
-
-			clearTimeout(this.timer)
-			this.timer = setTimeout(() => {
-				this.changeFrom = 'outer'
-				this.timer = null
-			}, 200);
-		},
-		findInterval(intervals, currentPosition) {
-			let current = null;
-			for (const interval of intervals) {
-				const { start, end, value } = interval;
-				if (currentPosition >= start && currentPosition <= end) {
-					current = value;
-				}
-			}
-			return current;
-		},
-		to(node) {
-			if (node === '$bottom') {
-				this.$refs.content.scrollTo({
-					top: this.scrollHeight,
-					behavior: 'smooth'
-				})
-			} else {
-				if (typeof node === 'object' && node instanceof HTMLElement) {
-					this.$refs.content.scrollTop = node.getBoundingClientRect().top - this.$el.getBoundingClientRect().top + this.$refs.content.scrollTop
-				} else if (!isNaN(node)) {
-					this.$refs.content.scrollTop = node
-				} else {
-					console.error(this.t('to.scroll.tip.error.paramType', 'toScroll.to'))
-				}
-			}
-		},
-		wheel(e) {
-			if (!this.effect) return
-			e.preventDefault()
-			if (e.wheelDelta < 0) {
-				this.position = this.position - Number(this.speed);
-				if (this.position < this.diff) {
-					this.position = this.diff;
-				} else {
-					e.preventDefault()
-				}
-			} else {
-				this.position = this.position + Number(this.speed);
-				if (this.position > 0) {
-					this.position = 0;
-				} else {
-					e.preventDefault()
-				}
-			}
-			this.barTop = (this.position / this.diff) * this.overagePercent;
-		},
-		adjust() {
-			this.init()
-		}
-	}
-}
-</script>
+<template>
+	<div class="to-scroll to-scroll-mode-plain" :class="setClass" :style="setStyle">
+		<div ref="content" class="to-scrollContent" :style="setContentStyle" @scroll="scroll($event)" @mousewheel="wheel($event)">
+			<slot></slot>
+			<div v-if="padding && paddingPosition !== 'side' && paddingPosition !== 'n'" :style="{height:padding+'em'}"></div>
+		</div>
+		<div v-if="vitrual" v-show="effect" ref="bar" class="to-scrollBar" :style="{'height': barHeight + '%', 'top': barTop + '%'}"></div>
+	</div>
+</template>
+<script>
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+export default {
+	name: 'ToScroll',
+	componentName: 'ToScroll',
+	mixins: [Locale],
+	model: {
+		event: 'change'
+	},
+	provide() {
+		return {
+			ToScroll: this
+		}
+	},
+	inject: {
+		ToScroll: {
+			default: ''
+		}
+	},
+	props: {
+		vitrual: Boolean,
+		value: {
+			type: [String, Number],
+			default() {
+				return 0
+			}
+		},
+		speed: {
+			type: [Number, String],
+			default: 10
+		},
+		top: {
+			type: [Number, String],
+			default: null
+		},
+		padding: {
+			type: [Number, String],
+			default: 0
+		},
+		paddingPosition: {
+			type: String,
+			default: ''
+		},
+		bottom: {
+			type: [Number, String],
+			default: null
+		},
+		height: {
+			type: [Number, String],
+			default: '100%'
+		},
+		barDisplay: {
+			type: String,
+			default: 'always'
+		},
+		except: {
+			type: [Array, String],
+			default() {
+				return ''
+			}
+		},
+		// 支持 info / bg
+		color: {
+			type: String,
+			default: ''
+		},
+		test: Boolean
+	},
+	data() {
+		return {
+			changeFrom: 'outer',
+			points: [],
+			stickies: [],
+			timer: null,
+			effect: false,
+			barTop: 0,
+			barHeight: 0,
+			diff: 0,
+			position: 0,
+			overagePercent: 0,
+			offsetHeight: 0,
+			scrollHeight: 0,
+			old_offsetHeight: 0,
+			offsetTop: 0,
+			offsetBottom: 0
+		}
+	},
+	computed: {
+		setContentStyle() {
+			let obj = {}
+			if (this.position !== 0) {
+				obj.marginTop = this.position + 'px'
+			}
+			if (this.padding) {
+				// overflow:auto + padding-bottom 在所谓的标准下是失效的
+				const p = this.padding
+				obj.padding = `${p}em ${p}em 0 ${p}em`
+			}
+			if (this.paddingPosition === 'u' || this.paddingPosition === 'side') {
+				obj.paddingTop = 0;
+			}
+			if (this.paddingPosition === 'c') {
+				obj.paddingRight = 0;
+			}
+			if (this.paddingPosition === 'ɔ') {
+				obj.paddingLeft = 0;
+			}
+			return obj
+		},
+		setClass() {
+			let arr = []
+			if (this.vitrual) {
+				arr.push('to-scroll-vitrual')
+			}
+			if (this.barDisplay === 'hover') {
+				arr.push('to-scroll-bar-hover')
+			}
+			if (this.barDisplay === 'none') {
+				arr.push('to-scroll-bar-none')
+			}
+			if (typeof this.except === 'string' && this.except) {
+				arr.push('to-scroll-float')
+				arr.push(`to-scroll-except-${this.except}`)
+			}
+			if (this.top !== null || this.bottom !== null) {
+				arr.push('to-scroll-float')
+			}
+			if (Array.isArray(this.except) && this.except.length > 0) {
+				arr.push('to-scroll-float')
+				this.except.forEach(el => {
+					arr.push(`to-scroll-except-${el}`)
+				});
+			}
+			if (this.color) {
+				arr.push(`to-scroll-color-${this.color}`)
+			}
+			return arr
+		},
+		setStyle() {
+			let obj = {}
+			if (!isNaN(this.top)) {
+				obj.top = this.top + 'em'
+			} else {
+				obj.top = this.top
+			}
+			if (!isNaN(this.bottom)) {
+				obj.bottom = this.bottom + 'em'
+			} else {
+				obj.bottom = this.bottom
+			}
+			if (this.height && !this.except) {
+				if (!isNaN(this.height)) {
+					obj.height = this.height + 'em';
+				} else if (this.height === 'full') {
+					obj.height = '100%';
+				} else if (!this.top && !this.bottom) {
+					obj.height = this.height;
+				}
+			}
+			return obj
+		}
+	},
+	watch: {
+		value(val) {
+			let timer = setTimeout(() => {
+				if (this.points && this.points.length > 0 && this.changeFrom === 'outer') {
+					const node = this.points.find(item => item.value === val)
+					if (node) {
+						this.$refs.content.scrollTo(0, node.start + 1)
+					}
+				}
+				clearTimeout(timer)
+			}, 200);
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	created() {
+		window.addEventListener('resize', this.init)
+	},
+	activated() {
+		window.addEventListener('resize', this.init)
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.init)
+	},
+	deactivated() {
+		window.removeEventListener('resize', this.init)
+	},
+	methods: {
+		init() {
+			if (this.vitrual) {
+				const that = this
+				let timer = null
+				timer = setTimeout(() => {
+					if (that.$el && that.$refs.content) {
+						if (that.$el.offsetHeight < that.$refs.content.offsetHeight) {
+							that.effect = true;
+						}
+						that.barHeight = that.$el.offsetHeight / that.$refs.content.offsetHeight * 100
+						that.diff = that.$el.offsetHeight - that.$refs.content.offsetHeight
+						if (that.position < 0 && (that.$refs.content.offsetHeight < that.old_offsetHeight)) {
+							that.position = that.position - (that.$refs.content.offsetHeight - that.old_offsetHeight)
+						}
+						that.position = that.position < 0 ? that.position : 0
+						that.old_offsetHeight = that.$refs.content.offsetHeight
+						that.overagePercent = 100 - (that.$el.offsetHeight / that.$refs.content.offsetHeight) * 100
+
+						clearTimeout(timer)
+						timer = null
+					}
+				}, 100);
+			}
+
+			// 计算断点
+			if (this.value !== 0) {
+				let pointTimer = null
+				pointTimer = setTimeout(() => {
+					this.setPoints()
+
+					// 默认显示到指定位置
+					if (this.points && this.points.length > 0) {
+						const node = this.points.find(item => item.value === this.value)
+						if (node) {
+							this.$refs.content.scrollTo(0, node.start + 1)
+						}
+					}
+
+					clearTimeout(pointTimer)
+				}, 500);
+			}
+
+			setTimeout(() => {
+
+				// 计算初始化数据
+				this.offsetHeight = this.$refs.content.offsetHeight
+				this.scrollHeight = this.$refs.content.scrollHeight
+				this.scrollerTop = this.$el.getBoundingClientRect().top
+
+				// 计算粘连点
+				this.setStickies()
+			}, 500);
+		},
+		setPoints() {
+			if (!this.$refs.content) return
+			this.points = []
+			const nodes = this.$refs.content.querySelectorAll('.to-scrollPoint')
+			if (nodes && nodes.length > 0) {
+				nodes.forEach((item, index) => {
+					const vm = item.__vue__
+					this.points.push(
+						{
+							value: vm.value,
+							start: item.offsetTop,
+							end: index === nodes.length - 1 ? item.offsetTop + item.offsetHeight : nodes[index + 1].offsetTop - 1
+						}
+					)
+				})
+			}
+		},
+		// 设置 stikies
+		setStickies() {
+			if (!this.$refs.content) return
+			this.stickies = []
+			const nodes = this.$refs.content.querySelectorAll(':scope .to-scrollSticky:not(:scope .to-scroll .to-scrollSticky)')
+			if (nodes && nodes.length > 0) {
+				nodes.forEach(item => {
+					this.stickies.push(item.__vue__)
+				})
+			}
+		},
+		setSticky() {
+			if (this.stickies && this.stickies.length) {
+				const scrollerTop = this.$el.getBoundingClientRect().top
+				for (let i = 0; i < this.stickies.length; i++) {
+					const node = this.stickies[i]
+					const stickyTop = node.$el.getBoundingClientRect().top
+					const stickyHeight = node.$el.offsetHeight
+					const isTop = node.top !== 'auto' && stickyTop - node.top * this.$TouchUI.em() <= scrollerTop + 1
+					const isBottom = node.bottom !== 'auto' && scrollerTop + this.offsetHeight - node.bottom * this.$TouchUI.em() - stickyHeight <= stickyTop + 1
+					if (isTop || isBottom) {
+						node.sticky = true
+					} else {
+						node.sticky = false
+					}
+				}
+			}
+		},
+		scroll(e) {
+			if (this.$listeners.scroll) {
+				this.$emit('scroll', this.$refs.content)
+			}
+			this.changeFrom = 'inner'
+			if (this.$listeners.bottom || (this.points && this.points.length > 0)) {
+
+				// 触底事件
+				const catchBottom = this.$refs.content.scrollTop + this.offsetHeight + 5 >= this.scrollHeight
+				if (catchBottom) {
+					this.$emit('bottom')
+				}
+
+				// 定位方法
+				if (this.value !== 0 && this.points && this.points.length > 0) {
+					if (catchBottom) {
+						this.$emit('change', this.points[this.points.length - 1].value)
+					} else {
+						this.$emit('change', this.findInterval(this.points, this.$refs.content.scrollTop))
+					}
+				}
+			}
+
+			this.setSticky()
+
+			clearTimeout(this.timer)
+			this.timer = setTimeout(() => {
+				this.changeFrom = 'outer'
+				this.timer = null
+			}, 200);
+		},
+		findInterval(intervals, currentPosition) {
+			let current = null;
+			for (const interval of intervals) {
+				const { start, end, value } = interval;
+				if (currentPosition >= start && currentPosition <= end) {
+					current = value;
+				}
+			}
+			return current;
+		},
+		to(node) {
+			if (node === '$bottom') {
+				this.$refs.content.scrollTo({
+					top: this.scrollHeight,
+					behavior: 'smooth'
+				})
+			} else {
+				if (typeof node === 'object' && node instanceof HTMLElement) {
+					this.$refs.content.scrollTop = node.getBoundingClientRect().top - this.$el.getBoundingClientRect().top + this.$refs.content.scrollTop
+				} else if (!isNaN(node)) {
+					this.$refs.content.scrollTop = node
+				} else {
+					console.error(this.t('to.scroll.tip.error.paramType', 'toScroll.to'))
+				}
+			}
+		},
+		wheel(e) {
+			if (!this.effect) return
+			e.preventDefault()
+			if (e.wheelDelta < 0) {
+				this.position = this.position - Number(this.speed);
+				if (this.position < this.diff) {
+					this.position = this.diff;
+				} else {
+					e.preventDefault()
+				}
+			} else {
+				this.position = this.position + Number(this.speed);
+				if (this.position > 0) {
+					this.position = 0;
+				} else {
+					e.preventDefault()
+				}
+			}
+			this.barTop = (this.position / this.diff) * this.overagePercent;
+		},
+		adjust() {
+			this.init()
+		}
+	}
+}
+</script>