登录浏览器是建设银行移动门户网站,做短租类型的网站,建个公司网站需要多少钱,云南建设厅官方网站效果如下图#xff1a;在线预览 APIs
参数说明类型默认值必传from数值动画起始数值number0falseto数值目标值number1000falseduration数值动画持续时间#xff0c;单位msnumber3000falseautoplay是否自动开始动画booleantruefalseprecision精度#xff0c;保留小数点后几位…效果如下图在线预览 APIs
参数说明类型默认值必传from数值动画起始数值number0falseto数值目标值number1000falseduration数值动画持续时间单位msnumber3000falseautoplay是否自动开始动画booleantruefalseprecision精度保留小数点后几位number0falseprefix前缀string‘’falsesuffix后缀string‘’falseseparator千分位分隔符string‘,’falsedecimal小数点字符string‘.’falsecolor数值文本颜色stringundefinedfalsetransition动画过渡效果TransitionFuncTransitionFunc[‘easeInOutCubic’]false
Events
事件名称说明参数play播放动画() voidstarted动画开始播放() voidfinished动画播放完成() void
创建数值动画组件NumberAnimation.vue
script setup langts
import { ref, computed, watchEffect, onMounted, watch } from vue
import { useTransition, TransitionPresets } from vueuse/core
enum TransitionFunc {linear linear,easeOutSine easeOutSine,easeInOutSine easeInOutSine,easeInQuad easeInQuad,easeOutQuad easeOutQuad,easeInOutQuad easeInOutQuad,easeInCubic easeInCubic,easeOutCubic easeOutCubic,easeInOutCubic easeInOutCubic,easeInQuart easeInQuart,easeOutQuart easeOutQuart,easeInOutQuart easeInOutQuart,easeInQuint easeInQuint,easeOutQuint easeOutQuint,easeInOutQuint easeInOutQuint,easeInExpo easeInExpo,easeOutExpo easeOutExpo,easeInOutExpo easeInOutExpo,easeInCirc easeInCirc,easeOutCirc easeOutCirc,easeInOutCirc easeInOutCirc,easeInBack easeInBack,easeOutBack easeOutBack,easeInOutBack easeInOutBack
}
interface Props {from?: number // 数值动画起始数值to?: number // 数值目标值duration?: number // 数值动画持续时间单位msautoplay?: boolean // 是否自动开始动画precision?: number // 精度保留小数点后几位prefix?: string // 前缀suffix?: string // 后缀separator?: string // 千分位分隔符decimal?: string // 小数点字符color?: string // 数值文本颜色transition?: TransitionFunc // 动画过渡效果
}
const props withDefaults(definePropsProps(), {from: 0,to: 1000,duration: 3000,autoplay: true,precision: 0,prefix: ,suffix: ,separator: ,,decimal: .,color: undefined,transition: TransitionFunc[easeInOutCubic]
})
const source ref(props.from)
watchEffect(() {source.value props.from
})
watch([() props.from, () props.to],() {if (props.autoplay) {play()}}
)
onMounted(() {props.autoplay play()
})
const outputValue useTransition(source, {duration: props.duration,transition: TransitionPresets[props.transition],onFinished: () emits(finished),onStarted: () emits(started)})
function play () {source.value props.to
}
const showValue computed(() formatNumber(outputValue.value))
function isNumber (val: any) {return Object.prototype.toString.call(val) [object Number]
}
const emits defineEmits([started, finished])
function formatNumber (num: number | string) {const { precision, decimal, separator, suffix, prefix } propsif (num 0) {return num.toFixed(precision)}if (!num) {return }num Number(num).toFixed(precision)num const x num.split(.)let x1 x[0]const x2 x.length 1 ? decimal x[1] : const rgx /(\d)(\d{3})/if (separator !isNumber(separator)) {while (rgx.test(x1)) {x1 x1.replace(rgx, $1 separator $2)}}return prefix x1 x2 suffix
}
defineExpose({play
})
/script
templatespan :style{ color }{{ showValue }}/span
/template在要使用的页面引入
script setup langts
import NumberAnimation from NumberAnimation.vue
import { ref } from vuefunction onStarted () {console.log(started)
}
function onFinished () {console.log(finished)
}
const animationRef ref()
function onClick () {animationRef.value.play()
}
/script
templatedivh1NumberAnimation 数值动画/h1h2 classmt30 mb10基本使用/h2RowCol :span12Statistic title一个小目标NumberAnimation :to100000000.12345 //Statistic/ColCol :span12Statistic title一个小目标NumberAnimation :to100000000.12345 separator //Statistic/Col/Rowh2 classmt30 mb10精度/h2RowCol :span12Statistic title一个小目标NumberAnimation :from0.00 :to100000000.12345 :precision2 //Statistic/ColCol :span12Statistic title一个小目标NumberAnimation :to100000000.12345 :precision3//Statistic/Col/Rowh2 classmt30 mb10自定义前缀 后缀/h2RowCol :span12Statistic title一个小目标NumberAnimationprefix$:from0:to100000000 //Statistic/ColCol :span12Statistic title一个小目标NumberAnimation:from0:to100000000suffix元 //Statistic/Col/Rowh2 classmt30 mb10自定义数值颜色/h2RowCol :span12Statistic title一个小目标NumberAnimation color#1677FF :from0 :to100000000//Statistic/Col/Rowh2 classmt30 mb10自定义播放和动画时间/h2RowCol :span12Statistic title一个小目标NumberAnimationrefanimationRef:from0:to100000000:duration5000:precision2:autoplayfalsestartedonStartedfinishedonFinished //StatisticButton clickonClick播放/Button/Col/Row/div
/template
