Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
94b2222c
Unverified
提交
94b2222c
authored
4月 19, 2021
作者:
啝裳
提交者:
GitHub
4月 19, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: improve countTo (#499)
上级
502cc270
隐藏空白字符变更
内嵌
并排
正在显示
3 个修改的文件
包含
32 行增加
和
6 行删除
+32
-6
index.vue
src/components/CountTo/src/index.vue
+5
-2
props.ts
src/components/CountTo/src/props.ts
+4
-0
index.vue
src/views/demo/comp/count-to/index.vue
+23
-4
没有找到文件。
src/components/CountTo/src/index.vue
浏览文件 @
94b2222c
<
template
>
<
template
>
<span>
<span
:style=
"
{ color: color }"
>
{{
displayValue
}}
{{
displayValue
}}
</span>
</span>
</
template
>
</
template
>
...
@@ -22,6 +22,7 @@
...
@@ -22,6 +22,7 @@
timestamp
:
number
|
null
;
timestamp
:
number
|
null
;
rAF
:
any
;
rAF
:
any
;
remaining
:
number
|
null
;
remaining
:
number
|
null
;
color
:
any
;
}
>
({
}
>
({
localStartVal
:
props
.
startVal
,
localStartVal
:
props
.
startVal
,
displayValue
:
formatNumber
(
props
.
startVal
),
displayValue
:
formatNumber
(
props
.
startVal
),
...
@@ -32,6 +33,7 @@
...
@@ -32,6 +33,7 @@
timestamp
:
null
,
timestamp
:
null
,
remaining
:
null
,
remaining
:
null
,
rAF
:
null
,
rAF
:
null
,
color
:
null
,
});
});
onMounted
(()
=>
{
onMounted
(()
=>
{
...
@@ -52,10 +54,11 @@
...
@@ -52,10 +54,11 @@
});
});
function
start
()
{
function
start
()
{
const
{
startVal
,
duration
}
=
props
;
const
{
startVal
,
duration
,
color
}
=
props
;
state
.
localStartVal
=
startVal
;
state
.
localStartVal
=
startVal
;
state
.
startTime
=
null
;
state
.
startTime
=
null
;
state
.
localDuration
=
duration
;
state
.
localDuration
=
duration
;
state
.
color
=
color
;
state
.
paused
=
false
;
state
.
paused
=
false
;
state
.
rAF
=
requestAnimationFrame
(
count
);
state
.
rAF
=
requestAnimationFrame
(
count
);
}
}
...
...
src/components/CountTo/src/props.ts
浏览文件 @
94b2222c
...
@@ -13,6 +13,10 @@ export const countToProps = {
...
@@ -13,6 +13,10 @@ export const countToProps = {
return
value
>=
0
;
return
value
>=
0
;
},
},
},
},
color
:
{
type
:
String
as
PropType
<
string
>
,
require
:
false
,
},
decimal
:
propTypes
.
string
.
def
(
'.'
),
decimal
:
propTypes
.
string
.
def
(
'.'
),
separator
:
propTypes
.
string
.
def
(
','
),
separator
:
propTypes
.
string
.
def
(
','
),
prefix
:
propTypes
.
string
.
def
(
''
),
prefix
:
propTypes
.
string
.
def
(
''
),
...
...
src/views/demo/comp/count-to/index.vue
浏览文件 @
94b2222c
...
@@ -2,16 +2,35 @@
...
@@ -2,16 +2,35 @@
<PageWrapper
title=
"数字动画示例"
>
<PageWrapper
title=
"数字动画示例"
>
<Card>
<Card>
<CardGrid
class=
"count-to-demo-card"
>
<CardGrid
class=
"count-to-demo-card"
>
<CountTo
prefix=
"$"
:startVal=
"1"
:endVal=
"200000"
:duration=
"8000"
/>
<CountTo
prefix=
"$"
:
color=
"'#409EFF'"
:
startVal=
"1"
:endVal=
"200000"
:duration=
"8000"
/>
</CardGrid>
</CardGrid>
<CardGrid
class=
"count-to-demo-card"
>
<CardGrid
class=
"count-to-demo-card"
>
<CountTo
suffix=
"$"
:startVal=
"1"
:endVal=
"300000"
:decimals=
"2"
:duration=
"6000"
/>
<CountTo
suffix=
"$"
:color=
"'red'"
:startVal=
"1"
:endVal=
"300000"
:decimals=
"2"
:duration=
"6000"
/>
</CardGrid>
</CardGrid>
<CardGrid
class=
"count-to-demo-card"
>
<CardGrid
class=
"count-to-demo-card"
>
<CountTo
suffix=
"$"
:startVal=
"1"
:endVal=
"400000"
:duration=
"7000"
/>
<CountTo
suffix=
"$"
:color=
"'rgb(0,238,0)'"
:startVal=
"1"
:endVal=
"400000"
:duration=
"7000"
/>
</CardGrid>
</CardGrid>
<CardGrid
class=
"count-to-demo-card"
>
<CardGrid
class=
"count-to-demo-card"
>
<CountTo
separator=
"-"
:startVal=
"10000"
:endVal=
"500000"
:duration=
"8000"
/>
<CountTo
separator=
"-"
:color=
"'rgba(138,43,226,.6)'"
:startVal=
"10000"
:endVal=
"500000"
:duration=
"8000"
/>
</CardGrid>
</CardGrid>
</Card>
</Card>
</PageWrapper>
</PageWrapper>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论