12345678910111213141516171819202122232425262728293031323334353637 |
- import { defineComponent, ref, watch, onMounted, computed } from 'vue'
- import { CountUp } from 'countup.js'
- import { componentScheme } from './component.scheme'
- import { generateProps } from '../helper/component-util'
- export default defineComponent({
- name: 'CipCountUp',
- props: generateProps(componentScheme),
- setup (props) {
- const countRef = ref()
- const value = computed(() => {
- return props.endVal || props.modelValue
- })
- const countUp = ref()
- const newCountUP = () => {
- return new CountUp(countRef.value, props.endVal || props.modelValue, {
- duration: props.duration,
- startVal: props.startVal,
- decimalPlaces: props.decimalPlaces,
- prefix: props.prefix,
- suffix: props.suffix
- })
- }
- onMounted(() => {
- countUp.value = newCountUP()
- countUp.value.start()
- watch(props, () => {
- // 监听动态配置项,组件本身不支持动态配置,需要重新创建实例
- countUp.value = newCountUP()
- countUp.value.update(value.value)
- })
- })
- return () => (
- <span ref={countRef} />
- )
- }
- })
|