sh-view 2.8.1 → 2.8.2

package/packages/components/sh-count-to/index.vue

@@ -1,131 +1,131 @@
-<template>
-	<div class="sh-count-to">
-		<slot name="left"></slot>
-		<span ref="countRef" class="count-up" :class="countClass"></span>
-		<slot name="right"></slot>
-	</div>
-</template>
-
-<script>
-import { defineComponent, ref, watch, onMounted, onUnmounted, computed } from 'vue'
-import { CountUp } from 'countup.js'
-export default defineComponent({
-	name: 'ShCountTo',
-	props: {
-		start: {
-			type: Number,
-			default: 0
-		},
-		end: {
-			type: Number
-		},
-		duration: {
-			type: Number,
-			default: 2
-		},
-		options: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		callback: {
-			type: Function,
-			default() {}
-		},
-		countClass: {
-			type: [String, Object]
-		}
-	},
-	setup(props, context) {
-		let countUp = null
-		const countRef = ref()
-
-		const countOptions = computed(() => {
-			return Object.assign(
-				{
-					startVal: props.start, // 开始的数字  一般设置0开始
-					decimalPlaces: 0, // number类型 小数位，整数自动添.00
-					duration: props.duration, // number类型 动画延迟秒数，默认值是2
-					useGrouping: true, // boolean类型  是否开启逗号，默认true(1,000)false(1000)
-					useEasing: true, // booleanl类型 动画缓动效果(ease),默认true
-					smartEasingThreshold: 500, // numberl类型 大于这个数值的值开启平滑缓动
-					smartEasingAmount: 300, // numberl类型
-					separator: ',', // string 类型 分割用的符号
-					decimal: '.', // string 类型  小数分割符合
-					prefix: '', // sttring 类型  数字开头添加固定字符
-					suffix: '', // sttring类型 数字末尾添加固定字符
-					numerals: [] // Array类型 替换从0到9对应的字，也就是自定数字字符了,数组存储
-				},
-				props.options
-			)
-		})
-
-		watch(
-			() => props.end,
-			value => {
-				if (countUp && countUp.update) {
-					countUp.update(value)
-				}
-			}
-		)
-
-		const init = () => {
-			if (!countUp) {
-				countUp = new CountUp(countRef.value, props.end, countOptions.value)
-				countUp.start(() => {
-					props.callback(countUp)
-				})
-			}
-		}
-
-		const destroy = () => {
-			countUp = null
-		}
-
-		const countStart = callback => {
-			if (countUp && countUp.start) {
-				countUp.start(() => {
-					callback && callback(countUp)
-				})
-			}
-		}
-
-		const countPause = () => {
-			if (countUp && countUp.pauseResume) {
-				countUp.pauseResume()
-			}
-		}
-
-		const countReset = () => {
-			if (countUp && countUp.reset) {
-				countUp.reset()
-			}
-		}
-
-		const countUpdate = newEndVal => {
-			if (countUp && countUp.update) {
-				countUp.update(newEndVal)
-			}
-		}
-
-		onMounted(() => {
-			init()
-		})
-
-		onUnmounted(() => {
-			destroy()
-		})
-
-		return {
-			countRef,
-			countStart,
-			countPause,
-			countReset,
-			countUpdate
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+	<div class="sh-count-to">
+		<slot name="left"></slot>
+		<span ref="countRef" class="count-up" :class="countClass"></span>
+		<slot name="right"></slot>
+	</div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted, onUnmounted, computed } from 'vue'
+import { CountUp } from 'countup.js'
+export default defineComponent({
+	name: 'ShCountTo',
+	props: {
+		start: {
+			type: Number,
+			default: 0
+		},
+		end: {
+			type: Number
+		},
+		duration: {
+			type: Number,
+			default: 2
+		},
+		options: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		callback: {
+			type: Function,
+			default() {}
+		},
+		countClass: {
+			type: [String, Object]
+		}
+	},
+	setup(props, context) {
+		let countUp = null
+		const countRef = ref()
+
+		const countOptions = computed(() => {
+			return Object.assign(
+				{
+					startVal: props.start, // 开始的数字  一般设置0开始
+					decimalPlaces: 0, // number类型 小数位，整数自动添.00
+					duration: props.duration, // number类型 动画延迟秒数，默认值是2
+					useGrouping: true, // boolean类型  是否开启逗号，默认true(1,000)false(1000)
+					useEasing: true, // booleanl类型 动画缓动效果(ease),默认true
+					smartEasingThreshold: 500, // numberl类型 大于这个数值的值开启平滑缓动
+					smartEasingAmount: 300, // numberl类型
+					separator: ',', // string 类型 分割用的符号
+					decimal: '.', // string 类型  小数分割符合
+					prefix: '', // sttring 类型  数字开头添加固定字符
+					suffix: '', // sttring类型 数字末尾添加固定字符
+					numerals: [] // Array类型 替换从0到9对应的字，也就是自定数字字符了,数组存储
+				},
+				props.options
+			)
+		})
+
+		watch(
+			() => props.end,
+			value => {
+				if (countUp && countUp.update) {
+					countUp.update(value)
+				}
+			}
+		)
+
+		const init = () => {
+			if (!countUp) {
+				countUp = new CountUp(countRef.value, props.end, countOptions.value)
+				countUp.start(() => {
+					props.callback(countUp)
+				})
+			}
+		}
+
+		const destroy = () => {
+			countUp = null
+		}
+
+		const countStart = callback => {
+			if (countUp && countUp.start) {
+				countUp.start(() => {
+					callback && callback(countUp)
+				})
+			}
+		}
+
+		const countPause = () => {
+			if (countUp && countUp.pauseResume) {
+				countUp.pauseResume()
+			}
+		}
+
+		const countReset = () => {
+			if (countUp && countUp.reset) {
+				countUp.reset()
+			}
+		}
+
+		const countUpdate = newEndVal => {
+			if (countUp && countUp.update) {
+				countUp.update(newEndVal)
+			}
+		}
+
+		onMounted(() => {
+			init()
+		})
+
+		onUnmounted(() => {
+			destroy()
+		})
+
+		return {
+			countRef,
+			countStart,
+			countPause,
+			countReset,
+			countUpdate
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss"></style>