sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/sh-pull-refresh/index.vue

@@ -1,290 +1,290 @@
-<template>
-	<div ref="scroller" class="sh-pull-refresh" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
-		<div class="sh-pull-refresh-container" :style="getStyle">
-			<div class="sh-pull-refresh-container-topbox" :style="getHeightStyle">
-				<div class="sh-pull-refresh-container-topbox-text">
-					<slot v-if="status === 'pulling'" name="pulling">{{ pullingTxt }}</slot>
-					<slot v-if="status === 'loosing'" name="loosing">{{ loosingTxt }}</slot>
-					<slot v-if="status === 'loading'" name="loading">
-						<i class="sh-pull-refresh-container-topbox-icon vxe-icon-refresh roll"></i>
-						{{ loadingTxt }}
-					</slot>
-				</div>
-			</div>
-			<slot></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShPullRefresh',
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: false
-		},
-		pullingTxt: {
-			type: String,
-			default: '下拉刷新'
-		},
-		loosingTxt: {
-			type: String,
-			default: '释放刷新'
-		},
-		loadingTxt: {
-			type: String,
-			default: '加载中...'
-		},
-		// completeTxt: {
-		//   type: String,
-		//   default: ''
-		// },
-		headHeight: {
-			type: [String, Number],
-			default: 40
-		},
-		pullDistance: {
-			type: [String, Number],
-			default: 40
-		},
-		duration: {
-			type: [String, Number],
-			default: 0.3
-		}
-	},
-	emits: ['change', 'refresh', 'update:modelValue'],
-	data() {
-		return {
-			touch: {
-				startX: 0,
-				startY: 0,
-				moveX: 0,
-				moveY: 0,
-				deltaX: 0,
-				deltaY: 0,
-				offsetX: 0,
-				offsetY: 0,
-				direction: ''
-			},
-			scrollParent: null,
-			isPullRefresh: false,
-			distance: 0,
-			status: 'normal'
-		}
-	},
-	computed: {
-		classes() {
-			const prefixCls = 'pull-refresh'
-			return {
-				[prefixCls]: true
-			}
-		},
-		getPullStatus() {
-			if (this.status === 'pulling') {
-				return !this.slots.pulling ? this.pullingTxt : ''
-			} else if (this.status === 'loosing') {
-				return !this.slots.loosing ? this.loosingTxt : ''
-			} else if (this.status === 'loading') {
-				return !this.slots.loading ? this.loadingTxt : ''
-			} else {
-				return ''
-			}
-		},
-		getStyle() {
-			return {
-				transitionDuration: `${this.duration}s`,
-				transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
-			}
-		},
-		getHeightStyle() {
-			const styles = {}
-			if (this.headHeight !== 40) styles.height = this.pxCheck(this.headHeight)
-			return styles
-		}
-	},
-	watch: {
-		modelValue(val) {
-			if (val) {
-				this.setPullStatus(+this.headHeight, true)
-				this.$nextTick(() => this.$emit('refresh'))
-			} else {
-				this.setPullStatus(0)
-			}
-		}
-	},
-	mounted() {
-		this.initMounted()
-	},
-	methods: {
-		initMounted() {
-			this.scrollParent = this.getScrollParent()
-		},
-		pxCheck(value) {
-			return isNaN(Number(value)) ? String(value) : `${value}px`
-		},
-		timing(distance) {
-			const pullDistance = +(this.pullDistance || this.headHeight)
-			let moveDistance = distance
-			if (distance > pullDistance) {
-				if (distance < pullDistance * 2) {
-					moveDistance = (distance + pullDistance) / 2
-				} else {
-					moveDistance = pullDistance + distance / 4
-				}
-			}
-			return Math.round(moveDistance)
-		},
-		setPullStatus(distance, isLoading) {
-			const pullDistance = +(this.pullDistance || this.headHeight)
-			this.distance = distance
-			if (isLoading) {
-				this.status = 'loading'
-			} else if (distance === 0) {
-				this.status = 'normal'
-			} else if (distance < pullDistance) {
-				this.status = 'pulling'
-			} else {
-				this.status = 'loosing'
-			}
-			this.$emit('change', { status: this.status, distance })
-		},
-		isElement(node) {
-			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
-		},
-		isVertical() {
-			return this.touch.direction === 'vertical'
-		},
-		isHorizontal() {
-			return this.touch.direction === 'horizontal'
-		},
-		getDirection(x, y) {
-			let MIN_DISTANCE = 10
-			if (x > y && x > MIN_DISTANCE) {
-				return 'horizontal'
-			}
-			if (y > x && y > MIN_DISTANCE) {
-				return 'vertical'
-			}
-			return ''
-		},
-		resetTouch() {
-			this.touch.deltaX = 0
-			this.touch.deltaY = 0
-			this.touch.offsetX = 0
-			this.touch.offsetY = 0
-			this.touch.direction = ''
-		},
-		startTouch(event) {
-			this.resetTouch()
-			this.touch.startX = event.touches[0].clientX
-			this.touch.startY = event.touches[0].clientY
-		},
-		moveTouch(event) {
-			const touch = event.touches[0]
-			this.touch.deltaX = touch.clientX - this.touch.startX
-			this.touch.deltaY = touch.clientY - this.touch.startY
-			this.touch.moveX = touch.clientX
-			this.touch.moveY = touch.clientY
-			this.touch.offsetX = Math.abs(this.touch.deltaX)
-			this.touch.offsetY = Math.abs(this.touch.deltaY)
-			if (!this.touch.direction) {
-				this.touch.direction = this.getDirection(this.touch.offsetX, this.touch.offsetY)
-			}
-		},
-		getScrollParent(el, root = window) {
-			let node = el
-			const overflowScrollReg = /scroll|auto|overlay/i
-			while (node && node !== root && this.isElement(node)) {
-				const { overflowY } = window.getComputedStyle(node)
-				if (overflowScrollReg.test(overflowY)) {
-					return node
-				}
-				node = node.parentNode
-			}
-			return root
-		},
-		getScrollTopRoot() {
-			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
-		},
-		isCanTouch() {
-			return this.status !== 'loading' && this.status !== 'complete'
-		},
-		isScrollTop() {
-			if (this.scrollParent === window) {
-				return this.getScrollTopRoot() === 0
-			} else {
-				return this.scrollParent && this.scrollParent.scrollTop === 0
-			}
-		},
-		touchStart(event) {
-			if (this.isCanTouch()) {
-				if (this.isScrollTop()) {
-					this.startTouch(event)
-					this.isPullRefresh = true
-				} else {
-					this.distance = 0
-					this.isPullRefresh = false
-				}
-			}
-		},
-		touchMove(event) {
-			if (this.isCanTouch()) {
-				this.moveTouch(event)
-				if (this.isVertical() && this.touch.deltaY > 0 && this.isPullRefresh) {
-					event.preventDefault()
-					this.setPullStatus(this.timing(this.touch.deltaY))
-				}
-			}
-		},
-		touchEnd() {
-			const that = this
-			if (that.isPullRefresh && that.isCanTouch() && that.touch.deltaY) {
-				if (that.status === 'loosing') {
-					that.setPullStatus(+that.headHeight, true)
-					that.$emit('update:modelValue', true)
-					that.$nextTick(() => that.$emit('refresh'))
-				} else {
-					that.setPullStatus(0)
-				}
-			}
-			setTimeout(() => {
-				that.resetTouch()
-			}, 0)
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.sh-pull-refresh {
-	height: 100%;
-	overflow: hidden;
-	&-container {
-		position: relative;
-		height: 100%;
-		&-topbox {
-			position: absolute;
-			left: 0;
-			width: 100%;
-			height: 40px;
-			transform: translateY(-100%);
-			text-align: center;
-			font-size: 14px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			&-icon {
-				margin-right: 4px;
-				width: 16px;
-				height: 16px;
-				padding: 0;
-			}
-			&-text {
-				font-size: var(--font-size-base);
-				color: var(--theme-color);
-			}
-		}
-	}
-}
-</style>
+<template>
+	<div ref="scroller" class="sh-pull-refresh" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+		<div class="sh-pull-refresh-container" :style="getStyle">
+			<div class="sh-pull-refresh-container-topbox" :style="getHeightStyle">
+				<div class="sh-pull-refresh-container-topbox-text">
+					<slot v-if="status === 'pulling'" name="pulling">{{ pullingTxt }}</slot>
+					<slot v-if="status === 'loosing'" name="loosing">{{ loosingTxt }}</slot>
+					<slot v-if="status === 'loading'" name="loading">
+						<i class="sh-pull-refresh-container-topbox-icon vxe-icon-refresh roll"></i>
+						{{ loadingTxt }}
+					</slot>
+				</div>
+			</div>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShPullRefresh',
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		pullingTxt: {
+			type: String,
+			default: '下拉刷新'
+		},
+		loosingTxt: {
+			type: String,
+			default: '释放刷新'
+		},
+		loadingTxt: {
+			type: String,
+			default: '加载中...'
+		},
+		// completeTxt: {
+		//   type: String,
+		//   default: ''
+		// },
+		headHeight: {
+			type: [String, Number],
+			default: 40
+		},
+		pullDistance: {
+			type: [String, Number],
+			default: 40
+		},
+		duration: {
+			type: [String, Number],
+			default: 0.3
+		}
+	},
+	emits: ['change', 'refresh', 'update:modelValue'],
+	data() {
+		return {
+			touch: {
+				startX: 0,
+				startY: 0,
+				moveX: 0,
+				moveY: 0,
+				deltaX: 0,
+				deltaY: 0,
+				offsetX: 0,
+				offsetY: 0,
+				direction: ''
+			},
+			scrollParent: null,
+			isPullRefresh: false,
+			distance: 0,
+			status: 'normal'
+		}
+	},
+	computed: {
+		classes() {
+			const prefixCls = 'pull-refresh'
+			return {
+				[prefixCls]: true
+			}
+		},
+		getPullStatus() {
+			if (this.status === 'pulling') {
+				return !this.slots.pulling ? this.pullingTxt : ''
+			} else if (this.status === 'loosing') {
+				return !this.slots.loosing ? this.loosingTxt : ''
+			} else if (this.status === 'loading') {
+				return !this.slots.loading ? this.loadingTxt : ''
+			} else {
+				return ''
+			}
+		},
+		getStyle() {
+			return {
+				transitionDuration: `${this.duration}s`,
+				transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
+			}
+		},
+		getHeightStyle() {
+			const styles = {}
+			if (this.headHeight !== 40) styles.height = this.pxCheck(this.headHeight)
+			return styles
+		}
+	},
+	watch: {
+		modelValue(val) {
+			if (val) {
+				this.setPullStatus(+this.headHeight, true)
+				this.$nextTick(() => this.$emit('refresh'))
+			} else {
+				this.setPullStatus(0)
+			}
+		}
+	},
+	mounted() {
+		this.initMounted()
+	},
+	methods: {
+		initMounted() {
+			this.scrollParent = this.getScrollParent()
+		},
+		pxCheck(value) {
+			return isNaN(Number(value)) ? String(value) : `${value}px`
+		},
+		timing(distance) {
+			const pullDistance = +(this.pullDistance || this.headHeight)
+			let moveDistance = distance
+			if (distance > pullDistance) {
+				if (distance < pullDistance * 2) {
+					moveDistance = (distance + pullDistance) / 2
+				} else {
+					moveDistance = pullDistance + distance / 4
+				}
+			}
+			return Math.round(moveDistance)
+		},
+		setPullStatus(distance, isLoading) {
+			const pullDistance = +(this.pullDistance || this.headHeight)
+			this.distance = distance
+			if (isLoading) {
+				this.status = 'loading'
+			} else if (distance === 0) {
+				this.status = 'normal'
+			} else if (distance < pullDistance) {
+				this.status = 'pulling'
+			} else {
+				this.status = 'loosing'
+			}
+			this.$emit('change', { status: this.status, distance })
+		},
+		isElement(node) {
+			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
+		},
+		isVertical() {
+			return this.touch.direction === 'vertical'
+		},
+		isHorizontal() {
+			return this.touch.direction === 'horizontal'
+		},
+		getDirection(x, y) {
+			let MIN_DISTANCE = 10
+			if (x > y && x > MIN_DISTANCE) {
+				return 'horizontal'
+			}
+			if (y > x && y > MIN_DISTANCE) {
+				return 'vertical'
+			}
+			return ''
+		},
+		resetTouch() {
+			this.touch.deltaX = 0
+			this.touch.deltaY = 0
+			this.touch.offsetX = 0
+			this.touch.offsetY = 0
+			this.touch.direction = ''
+		},
+		startTouch(event) {
+			this.resetTouch()
+			this.touch.startX = event.touches[0].clientX
+			this.touch.startY = event.touches[0].clientY
+		},
+		moveTouch(event) {
+			const touch = event.touches[0]
+			this.touch.deltaX = touch.clientX - this.touch.startX
+			this.touch.deltaY = touch.clientY - this.touch.startY
+			this.touch.moveX = touch.clientX
+			this.touch.moveY = touch.clientY
+			this.touch.offsetX = Math.abs(this.touch.deltaX)
+			this.touch.offsetY = Math.abs(this.touch.deltaY)
+			if (!this.touch.direction) {
+				this.touch.direction = this.getDirection(this.touch.offsetX, this.touch.offsetY)
+			}
+		},
+		getScrollParent(el, root = window) {
+			let node = el
+			const overflowScrollReg = /scroll|auto|overlay/i
+			while (node && node !== root && this.isElement(node)) {
+				const { overflowY } = window.getComputedStyle(node)
+				if (overflowScrollReg.test(overflowY)) {
+					return node
+				}
+				node = node.parentNode
+			}
+			return root
+		},
+		getScrollTopRoot() {
+			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+		},
+		isCanTouch() {
+			return this.status !== 'loading' && this.status !== 'complete'
+		},
+		isScrollTop() {
+			if (this.scrollParent === window) {
+				return this.getScrollTopRoot() === 0
+			} else {
+				return this.scrollParent && this.scrollParent.scrollTop === 0
+			}
+		},
+		touchStart(event) {
+			if (this.isCanTouch()) {
+				if (this.isScrollTop()) {
+					this.startTouch(event)
+					this.isPullRefresh = true
+				} else {
+					this.distance = 0
+					this.isPullRefresh = false
+				}
+			}
+		},
+		touchMove(event) {
+			if (this.isCanTouch()) {
+				this.moveTouch(event)
+				if (this.isVertical() && this.touch.deltaY > 0 && this.isPullRefresh) {
+					event.preventDefault()
+					this.setPullStatus(this.timing(this.touch.deltaY))
+				}
+			}
+		},
+		touchEnd() {
+			const that = this
+			if (that.isPullRefresh && that.isCanTouch() && that.touch.deltaY) {
+				if (that.status === 'loosing') {
+					that.setPullStatus(+that.headHeight, true)
+					that.$emit('update:modelValue', true)
+					that.$nextTick(() => that.$emit('refresh'))
+				} else {
+					that.setPullStatus(0)
+				}
+			}
+			setTimeout(() => {
+				that.resetTouch()
+			}, 0)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-pull-refresh {
+	height: 100%;
+	overflow: hidden;
+	&-container {
+		position: relative;
+		height: 100%;
+		&-topbox {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: 40px;
+			transform: translateY(-100%);
+			text-align: center;
+			font-size: 14px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&-icon {
+				margin-right: 4px;
+				width: 16px;
+				height: 16px;
+				padding: 0;
+			}
+			&-text {
+				font-size: var(--vxe-font-size);
+				color: var(--vxe-primary-color);
+			}
+		}
+	}
+}
+</style>