sh-view 2.8.1 → 2.8.2

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

@@ -1,289 +1,289 @@
-<template>
-	<div ref="scroller" class="sh-pull-refresh" @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>
-import { defineComponent, computed, onMounted, getCurrentInstance, ref, reactive, watch, nextTick } from 'vue'
-export default defineComponent({
-	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'],
-	setup(props, context) {
-		const { emit, slots } = context
-		const touch = reactive({
-			startX: 0,
-			startY: 0,
-			moveX: 0,
-			moveY: 0,
-			deltaX: 0,
-			deltaY: 0,
-			offsetX: 0,
-			offsetY: 0,
-			direction: ''
-		})
-		let scrollParent = null
-		const isPullRefresh = ref(false)
-		const distance = ref(0)
-		const status = ref('normal')
-
-		const getPullStatus = computed(() => {
-			if (status.value === 'pulling') {
-				return !slots.pulling ? props.pullingTxt : ''
-			} else if (status.value === 'loosing') {
-				return !slots.loosing ? props.loosingTxt : ''
-			} else if (status.value === 'loading') {
-				return !slots.loading ? props.loadingTxt : ''
-			}
-			return ''
-		})
-		const getStyle = computed(() => {
-			return {
-				transitionDuration: `${props.duration}s`,
-				transform: distance.value ? `translate3d(0,${distance.value}px, 0)` : ''
-			}
-		})
-		const getHeightStyle = computed(() => {
-			let styles = {}
-			if (props.headHeight !== 40) styles.height = pxCheck(props.headHeight)
-			return styles
-		})
-
-		const initMounted = () => {
-			scrollParent = getScrollParent()
-		}
-		const pxCheck = value => {
-			return isNaN(Number(value)) ? String(value) : `${value}px`
-		}
-		const timing = distanceValue => {
-			const pullDistance = +(props.pullDistance || props.headHeight)
-			let moveDistance = distanceValue
-			if (distanceValue > pullDistance) {
-				if (distanceValue < pullDistance * 2) {
-					moveDistance = (distanceValue + pullDistance) / 2
-				} else {
-					moveDistance = pullDistance + distanceValue / 4
-				}
-			}
-			return Math.round(moveDistance)
-		}
-		const setPullStatus = (distanceValue, isLoading) => {
-			const pullDistance = +(props.pullDistance || props.headHeight)
-			distance.value = distanceValue
-			if (isLoading) {
-				status.value = 'loading'
-			} else if (distanceValue === 0) {
-				status.value = 'normal'
-			} else if (distanceValue < pullDistance) {
-				status.value = 'pulling'
-			} else {
-				status.value = 'loosing'
-			}
-			emit('change', { status: status.value, distance: distanceValue })
-		}
-		const isElement = node => {
-			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
-		}
-		const isVertical = () => {
-			return touch.direction === 'vertical'
-		}
-		const isHorizontal = () => {
-			return touch.direction === 'horizontal'
-		}
-		const getDirection = (x, y) => {
-			let MIN_DISTANCE = 10
-			if (x > y && x > MIN_DISTANCE) {
-				return 'horizontal'
-			}
-			if (y > x && y > MIN_DISTANCE) {
-				return 'vertical'
-			}
-			return ''
-		}
-		const resetTouch = () => {
-			touch.deltaX = 0
-			touch.deltaY = 0
-			touch.offsetX = 0
-			touch.offsetY = 0
-			touch.direction = ''
-		}
-		const startTouch = event => {
-			resetTouch()
-			touch.startX = event.touches[0].clientX
-			touch.startY = event.touches[0].clientY
-		}
-		const moveTouch = event => {
-			const touch = event.touches[0]
-			touch.deltaX = touch.clientX - touch.startX
-			touch.deltaY = touch.clientY - touch.startY
-			touch.moveX = touch.clientX
-			touch.moveY = touch.clientY
-			touch.offsetX = Math.abs(touch.deltaX)
-			touch.offsetY = Math.abs(touch.deltaY)
-			if (!touch.direction) {
-				touch.direction = getDirection(touch.offsetX, touch.offsetY)
-			}
-		}
-		const getScrollParent = (el, root = window) => {
-			let node = el
-			const overflowScrollReg = /scroll|auto|overlay/i
-			while (node && node !== root && isElement(node)) {
-				const { overflowY } = window.getComputedStyle(node)
-				if (overflowScrollReg.test(overflowY)) {
-					return node
-				}
-				node = node.parentNode
-			}
-			return root
-		}
-		const getScrollTopRoot = () => {
-			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
-		}
-		const isCanTouch = () => {
-			return !['loading', 'complete'].includes(status.value)
-		}
-		const isScrollTop = () => {
-			if (scrollParent === window) {
-				return getScrollTopRoot() === 0
-			} else {
-				return scrollParent && scrollParent.scrollTop === 0
-			}
-		}
-		const touchStart = event => {
-			if (!isCanTouch()) return
-			if (isScrollTop()) {
-				startTouch(event)
-				isPullRefresh.value = true
-			} else {
-				distance.value = 0
-				isPullRefresh.value = false
-			}
-		}
-		const touchMove = event => {
-			if (!isCanTouch()) return
-			moveTouch(event)
-			if (isVertical() && touch.deltaY > 0 && isPullRefresh) {
-				event.preventDefault()
-				setPullStatus(timing(touch.deltaY))
-			}
-		}
-		const touchEnd = () => {
-			if (isPullRefresh.value && isCanTouch() && touch.deltaY) {
-				if (status.value === 'loosing') {
-					setPullStatus(+props.headHeight, true)
-					emit('update:modelValue', true)
-					nextTick(() => emit('refresh'))
-				} else {
-					setPullStatus(0)
-				}
-			}
-			setTimeout(() => {
-				resetTouch()
-			}, 0)
-		}
-
-		watch(
-			() => props.modelValue,
-			val => {
-				if (val) {
-					setPullStatus(+props.headHeight, true)
-					nextTick(() => emit('refresh'))
-				} else {
-					setPullStatus(0)
-				}
-			}
-		)
-
-		onMounted(() => {
-			initMounted()
-		})
-
-		return {
-			getStyle,
-			getHeightStyle,
-			touchStart,
-			touchMove,
-			touchEnd
-		}
-	}
-})
-</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>
+<template>
+	<div ref="scroller" class="sh-pull-refresh" @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>
+import { defineComponent, computed, onMounted, getCurrentInstance, ref, reactive, watch, nextTick } from 'vue'
+export default defineComponent({
+	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'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const touch = reactive({
+			startX: 0,
+			startY: 0,
+			moveX: 0,
+			moveY: 0,
+			deltaX: 0,
+			deltaY: 0,
+			offsetX: 0,
+			offsetY: 0,
+			direction: ''
+		})
+		let scrollParent = null
+		const isPullRefresh = ref(false)
+		const distance = ref(0)
+		const status = ref('normal')
+
+		const getPullStatus = computed(() => {
+			if (status.value === 'pulling') {
+				return !slots.pulling ? props.pullingTxt : ''
+			} else if (status.value === 'loosing') {
+				return !slots.loosing ? props.loosingTxt : ''
+			} else if (status.value === 'loading') {
+				return !slots.loading ? props.loadingTxt : ''
+			}
+			return ''
+		})
+		const getStyle = computed(() => {
+			return {
+				transitionDuration: `${props.duration}s`,
+				transform: distance.value ? `translate3d(0,${distance.value}px, 0)` : ''
+			}
+		})
+		const getHeightStyle = computed(() => {
+			let styles = {}
+			if (props.headHeight !== 40) styles.height = pxCheck(props.headHeight)
+			return styles
+		})
+
+		const initMounted = () => {
+			scrollParent = getScrollParent()
+		}
+		const pxCheck = value => {
+			return isNaN(Number(value)) ? String(value) : `${value}px`
+		}
+		const timing = distanceValue => {
+			const pullDistance = +(props.pullDistance || props.headHeight)
+			let moveDistance = distanceValue
+			if (distanceValue > pullDistance) {
+				if (distanceValue < pullDistance * 2) {
+					moveDistance = (distanceValue + pullDistance) / 2
+				} else {
+					moveDistance = pullDistance + distanceValue / 4
+				}
+			}
+			return Math.round(moveDistance)
+		}
+		const setPullStatus = (distanceValue, isLoading) => {
+			const pullDistance = +(props.pullDistance || props.headHeight)
+			distance.value = distanceValue
+			if (isLoading) {
+				status.value = 'loading'
+			} else if (distanceValue === 0) {
+				status.value = 'normal'
+			} else if (distanceValue < pullDistance) {
+				status.value = 'pulling'
+			} else {
+				status.value = 'loosing'
+			}
+			emit('change', { status: status.value, distance: distanceValue })
+		}
+		const isElement = node => {
+			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
+		}
+		const isVertical = () => {
+			return touch.direction === 'vertical'
+		}
+		const isHorizontal = () => {
+			return touch.direction === 'horizontal'
+		}
+		const getDirection = (x, y) => {
+			let MIN_DISTANCE = 10
+			if (x > y && x > MIN_DISTANCE) {
+				return 'horizontal'
+			}
+			if (y > x && y > MIN_DISTANCE) {
+				return 'vertical'
+			}
+			return ''
+		}
+		const resetTouch = () => {
+			touch.deltaX = 0
+			touch.deltaY = 0
+			touch.offsetX = 0
+			touch.offsetY = 0
+			touch.direction = ''
+		}
+		const startTouch = event => {
+			resetTouch()
+			touch.startX = event.touches[0].clientX
+			touch.startY = event.touches[0].clientY
+		}
+		const moveTouch = event => {
+			const touch = event.touches[0]
+			touch.deltaX = touch.clientX - touch.startX
+			touch.deltaY = touch.clientY - touch.startY
+			touch.moveX = touch.clientX
+			touch.moveY = touch.clientY
+			touch.offsetX = Math.abs(touch.deltaX)
+			touch.offsetY = Math.abs(touch.deltaY)
+			if (!touch.direction) {
+				touch.direction = getDirection(touch.offsetX, touch.offsetY)
+			}
+		}
+		const getScrollParent = (el, root = window) => {
+			let node = el
+			const overflowScrollReg = /scroll|auto|overlay/i
+			while (node && node !== root && isElement(node)) {
+				const { overflowY } = window.getComputedStyle(node)
+				if (overflowScrollReg.test(overflowY)) {
+					return node
+				}
+				node = node.parentNode
+			}
+			return root
+		}
+		const getScrollTopRoot = () => {
+			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+		}
+		const isCanTouch = () => {
+			return !['loading', 'complete'].includes(status.value)
+		}
+		const isScrollTop = () => {
+			if (scrollParent === window) {
+				return getScrollTopRoot() === 0
+			} else {
+				return scrollParent && scrollParent.scrollTop === 0
+			}
+		}
+		const touchStart = event => {
+			if (!isCanTouch()) return
+			if (isScrollTop()) {
+				startTouch(event)
+				isPullRefresh.value = true
+			} else {
+				distance.value = 0
+				isPullRefresh.value = false
+			}
+		}
+		const touchMove = event => {
+			if (!isCanTouch()) return
+			moveTouch(event)
+			if (isVertical() && touch.deltaY > 0 && isPullRefresh) {
+				event.preventDefault()
+				setPullStatus(timing(touch.deltaY))
+			}
+		}
+		const touchEnd = () => {
+			if (isPullRefresh.value && isCanTouch() && touch.deltaY) {
+				if (status.value === 'loosing') {
+					setPullStatus(+props.headHeight, true)
+					emit('update:modelValue', true)
+					nextTick(() => emit('refresh'))
+				} else {
+					setPullStatus(0)
+				}
+			}
+			setTimeout(() => {
+				resetTouch()
+			}, 0)
+		}
+
+		watch(
+			() => props.modelValue,
+			val => {
+				if (val) {
+					setPullStatus(+props.headHeight, true)
+					nextTick(() => emit('refresh'))
+				} else {
+					setPullStatus(0)
+				}
+			}
+		)
+
+		onMounted(() => {
+			initMounted()
+		})
+
+		return {
+			getStyle,
+			getHeightStyle,
+			touchStart,
+			touchMove,
+			touchEnd
+		}
+	}
+})
+</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>