Skip to content

Commit b76c76d

Browse files
lcy0620lcy0620
authored
feat(number-animation): Add NumberAnimation component (#3301)
* feat(number-animation): [number-animation] Add NumberAnimation component * feat(number-animation): [number-animation] Add NumberAnimation component * feat(number-animation): [number-animation] Add NumberAnimation component * feat(number-animation): [number-animation] Add NumberAnimation component * feat(number-animation): [number-animation] Add NumberAnimation component * feat(number-animation): [number-animation] Add NumberAnimation component
1 parent f98b936 commit b76c76d

30 files changed

+640
-3
lines changed

‎examples/sites/demos/apis/number-animation.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
export default {
2+
mode: ['pc'],
3+
apis: [
4+
{
5+
name: 'number-animation',
6+
type: 'component',
7+
props: [
8+
{
9+
name: 'active',
10+
type: 'boolean',
11+
defaultValue: 'true',
12+
desc: {
13+
'zh-CN': '是否开始动画',
14+
'en-US': 'Whether or not start animation'
15+
},
16+
mode: ['pc'],
17+
pcDemo: 'basic-usage'
18+
},
19+
{
20+
name: 'duration',
21+
type: 'number',
22+
defaultValue: '3000',
23+
desc: {
24+
'zh-CN': '动画持续时间',
25+
'en-US': 'Animation duration'
26+
},
27+
mode: ['pc'],
28+
pcDemo: 'basic-usage'
29+
},
30+
{
31+
name: 'from',
32+
type: 'number',
33+
defaultValue: '0',
34+
desc: {
35+
'zh-CN': '数值动画起始值',
36+
'en-US': 'Starting value of numerical animation'
37+
},
38+
mode: ['pc'],
39+
pcDemo: 'basic-usage'
40+
},
41+
{
42+
name: 'to',
43+
type: 'number',
44+
defaultValue: '',
45+
desc: {
46+
'zh-CN': '目标值',
47+
'en-US': 'Target value'
48+
},
49+
mode: ['pc'],
50+
pcDemo: 'basic-usage'
51+
},
52+
{
53+
name: 'precision',
54+
type: 'number',
55+
defaultValue: '0',
56+
desc: {
57+
'zh-CN': '精度，保留小数点后几位',
58+
'en-US': 'Precision, rounded to a few decimal places.'
59+
},
60+
mode: ['pc'],
61+
pcDemo: 'precision'
62+
},
63+
{
64+
name: 'separator',
65+
type: 'string',
66+
defaultValue: ',',
67+
desc: {
68+
'zh-CN': '千分位分隔符',
69+
'en-US': 'Thousandth separator'
70+
},
71+
mode: ['pc'],
72+
pcDemo: 'separator'
73+
}
74+
],
75+
events: [
76+
{
77+
name: 'finish',
78+
type: '() => void',
79+
defaultValue: '',
80+
desc: {
81+
'zh-CN': '动画结束后的回调',
82+
'en-US': 'The callback after the animation ends.'
83+
},
84+
mode: ['pc'],
85+
pcDemo: 'finish-events'
86+
}
87+
],
88+
methods: [
89+
{
90+
name: 'play',
91+
type: '() => void',
92+
defaultValue: '',
93+
desc: {
94+
'zh-CN': '播放动画',
95+
'en-US': 'Play Animation'
96+
},
97+
mode: ['pc'],
98+
pcDemo: 'finish-events'
99+
}
100+
],
101+
slots: []
102+
}
103+
]
104+
}

‎examples/sites/demos/pc/app/number-animation/basic-usage-composition-api.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script setup>
7+
import { ref } from 'vue'
8+
import { TinyButton, TinyNumberAnimation } from '@opentiny/vue'
9+
10+
const numberAnimationRef = ref(null)
11+
const fromVal = ref(0)
12+
const toVal = ref(12309)
13+
function handleClick() {
14+
numberAnimationRef.value?.play()
15+
}
16+
</script>

‎examples/sites/demos/pc/app/number-animation/basic-usage.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('基本用法', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull()) // 断言页面上不出现错误
5+
await page.goto('number-animation#basic-usage') // 要测试的示例的相对地址
6+
await page.waitForTimeout(1000)
7+
await page.locator('#basic-usage').getByText('12,039')
8+
})

‎examples/sites/demos/pc/app/number-animation/basic-usage.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script lang="jsx">
7+
import { TinyButton, TinyNumberAnimation } from '@opentiny/vue'
8+
9+
export default {
10+
components: {
11+
TinyButton,
12+
TinyNumberAnimation
13+
},
14+
data() {
15+
return {
16+
fromVal: 0,
17+
toVal: 12039
18+
}
19+
},
20+
methods: {
21+
handleClick() {
22+
this.$refs.numberAnimationRef.play()
23+
}
24+
}
25+
}
26+
</script>

‎examples/sites/demos/pc/app/number-animation/finish-events-composition-api.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" :active="false" @finish="handleFinish" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script setup lang="jsx">
7+
import { ref } from 'vue'
8+
import { TinyButton, TinyNumberAnimation, TinyModal } from '@opentiny/vue'
9+
10+
const numberAnimationRef = ref(null)
11+
const fromVal = ref(0)
12+
const toVal = ref(900)
13+
14+
function handleClick() {
15+
numberAnimationRef.value?.play()
16+
}
17+
function handleFinish() {
18+
TinyModal.message({ message: '动画结束了', status: 'info' })
19+
}
20+
</script>

‎examples/sites/demos/pc/app/number-animation/finish-events.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('动画播放完成', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('number-animation#finish-events')
6+
await page.getByRole('button', { name: '播放' }).click()
7+
await page.waitForTimeout(1000)
8+
await page.locator('#finish-events').getByText('900')
9+
const messageLocator = page.locator('.tiny-modal__box').filter({ hasText: '动画结束了' })
10+
await expect(messageLocator).toBeVisible()
11+
})

‎examples/sites/demos/pc/app/number-animation/finish-events.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" :active="false" @finish="handleFinish" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script lang="jsx">
7+
import { TinyButton, TinyNumberAnimation, TinyModal } from '@opentiny/vue'
8+
9+
export default {
10+
components: {
11+
TinyButton,
12+
TinyNumberAnimation
13+
},
14+
data() {
15+
return {
16+
fromVal: 0,
17+
toVal: 900
18+
}
19+
},
20+
methods: {
21+
handleClick() {
22+
this.$refs.numberAnimationRef.play()
23+
},
24+
handleFinish() {
25+
TinyModal.message({ message: '动画结束了', status: 'info' })
26+
}
27+
}
28+
}
29+
</script>

‎examples/sites/demos/pc/app/number-animation/precision-composition-api.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" :active="false" :precision="4" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script setup lang="jsx">
7+
import { ref } from 'vue'
8+
import { TinyButton, TinyNumberAnimation } from '@opentiny/vue'
9+
10+
const numberAnimationRef = ref(null)
11+
const fromVal = ref(0.0)
12+
const toVal = ref(24)
13+
function handleClick() {
14+
numberAnimationRef.value?.play()
15+
}
16+
</script>

‎examples/sites/demos/pc/app/number-animation/precision.spec.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('精度', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull()) // 断言页面上不出现错误
5+
await page.goto('number-animation#precision') // 要测试的示例的相对地址
6+
await page.getByRole('button', { name: /播放/ }).click()
7+
await page.waitForTimeout(1000)
8+
await page.locator('#precision').getByText('24.0000')
9+
})

‎examples/sites/demos/pc/app/number-animation/precision.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<tiny-number-animation ref="numberAnimationRef" :from="fromVal" :to="toVal" :active="false" :precision="4" />
3+
<tiny-button @click="handleClick">播放</tiny-button>
4+
</template>
5+
6+
<script lang="jsx">
7+
import { TinyButton, TinyNumberAnimation } from '@opentiny/vue'
8+
9+
export default {
10+
components: {
11+
TinyButton,
12+
TinyNumberAnimation
13+
},
14+
data() {
15+
return {
16+
fromVal: 0.0,
17+
toVal: 24
18+
}
19+
},
20+
methods: {
21+
handleClick() {
22+
this.$refs.numberAnimationRef.play()
23+
}
24+
}
25+
}
26+
</script>

0 commit comments

Comments
 (0)