Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenYFan_OHHH
uni-app
提交
b16368ec
U
uni-app
项目概览
ChenYFan_OHHH
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b16368ec
编写于
4月 21, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): progress
上级
d700685c
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
152 addition
and
128 deletion
+152
-128
packages/uni-components/src/components/index.ts
packages/uni-components/src/components/index.ts
+1
-1
packages/uni-components/src/components/progress/index.tsx
packages/uni-components/src/components/progress/index.tsx
+151
-0
packages/uni-components/src/components/progress/index.vue
packages/uni-components/src/components/progress/index.vue
+0
-127
未找到文件。
packages/uni-components/src/components/index.ts
浏览文件 @
b16368ec
...
...
@@ -14,7 +14,7 @@ import MovableView from './movable-view/index.vue'
import
Navigator
from
'
./navigator/index.vue
'
// import PickerView from './picker-view/index.vue'
// import PickerViewColumn from './picker-view-column/index.vue'
import
Progress
from
'
./progress/index
.vue
'
import
Progress
from
'
./progress/index
'
import
Radio
from
'
./radio/index.vue
'
import
RadioGroup
from
'
./radio-group/index.vue
'
import
ResizeSensor
from
'
./resize-sensor/index
'
...
...
packages/uni-components/src/components/progress/index.tsx
0 → 100644
浏览文件 @
b16368ec
import
{
defineComponent
,
ref
,
reactive
,
watch
,
computed
,
ExtractPropTypes
,
}
from
'
vue
'
const
VALUES
=
{
activeColor
:
'
#007AFF
'
,
backgroundColor
:
'
#EBEBEB
'
,
activeMode
:
'
backwards
'
,
}
const
props
=
{
percent
:
{
type
:
[
Number
,
String
],
default
:
0
,
validator
(
value
:
number
|
string
)
{
return
!
isNaN
(
parseFloat
(
value
as
string
))
},
},
showInfo
:
{
type
:
[
Boolean
,
String
],
default
:
false
,
},
strokeWidth
:
{
type
:
[
Number
,
String
],
default
:
6
,
validator
(
value
:
number
|
string
)
{
return
!
isNaN
(
parseFloat
(
value
as
string
))
},
},
color
:
{
type
:
String
,
default
:
VALUES
.
activeColor
,
},
activeColor
:
{
type
:
String
,
default
:
VALUES
.
activeColor
,
},
backgroundColor
:
{
type
:
String
,
default
:
VALUES
.
backgroundColor
,
},
active
:
{
type
:
[
Boolean
,
String
],
default
:
false
,
},
activeMode
:
{
type
:
String
,
default
:
VALUES
.
activeMode
,
},
duration
:
{
type
:
[
Number
,
String
],
default
:
30
,
validator
(
value
:
number
|
string
)
{
return
!
isNaN
(
parseFloat
(
value
as
string
))
},
},
}
type
ProgressProps
=
ExtractPropTypes
<
typeof
props
>
type
ProgerssState
=
ReturnType
<
typeof
useProgressState
>
export
default
defineComponent
({
name
:
'
Progress
'
,
props
,
setup
(
props
,
{
attrs
})
{
const
state
=
useProgressState
(
props
)
_activeAnimation
(
state
,
props
)
watch
(
()
=>
state
.
realPercent
,
(
newValue
,
oldValue
)
=>
{
state
.
strokeTimer
&&
clearInterval
(
state
.
strokeTimer
)
state
.
lastPercent
=
oldValue
||
0
_activeAnimation
(
state
,
props
)
}
)
return
()
=>
{
const
{
showInfo
}
=
props
const
{
outerBarStyle
,
innerBarStyle
,
currentPercent
}
=
state
return
(
<
uni
-
progress
class
=
"uni-progress"
{
...
attrs
}
>
<
div
style
=
{
outerBarStyle
}
class
=
"uni-progress-bar"
>
<
div
style
=
{
innerBarStyle
}
class
=
"uni-progress-inner-bar"
/>
</
div
>
{
showInfo
?
<
p
class
=
"uni-progress-info"
>
{
currentPercent
}
%
</
p
>
:
''
}
</
uni
-
progress
>
)
}
},
})
function
useProgressState
(
props
:
ProgressProps
)
{
const
currentPercent
=
ref
<
number
>
(
0
)
const
outerBarStyle
=
computed
(
()
=>
`background-color:
${
props
.
backgroundColor
}
; height:
${
props
.
strokeWidth
}
px;`
)
const
innerBarStyle
=
computed
(()
=>
{
// 兼容下不推荐的属性,activeColor 优先级高于 color。
const
backgroundColor
=
props
.
color
!==
VALUES
.
activeColor
&&
props
.
activeColor
===
VALUES
.
activeColor
?
props
.
color
:
props
.
activeColor
return
`width:
${
currentPercent
.
value
}
%;background-color:
${
backgroundColor
}
`
})
const
realPercent
=
computed
(()
=>
{
// 确保最终计算时使用的是 Number 类型的值,并且在有效范围内。
let
realValue
=
parseFloat
(
props
.
percent
as
string
)
realValue
<
0
&&
(
realValue
=
0
)
realValue
>
100
&&
(
realValue
=
100
)
return
realValue
})
const
state
=
reactive
({
outerBarStyle
,
innerBarStyle
,
realPercent
,
currentPercent
,
strokeTimer
:
0
,
lastPercent
:
0
,
})
return
state
}
function
_activeAnimation
(
state
:
ProgerssState
,
props
:
ProgressProps
)
{
if
(
props
.
active
)
{
state
.
currentPercent
=
props
.
activeMode
===
VALUES
.
activeMode
?
0
:
state
.
lastPercent
state
.
strokeTimer
=
setInterval
(()
=>
{
if
(
state
.
currentPercent
+
1
>
state
.
realPercent
)
{
state
.
currentPercent
=
state
.
realPercent
state
.
strokeTimer
&&
clearInterval
(
state
.
strokeTimer
)
}
else
{
state
.
currentPercent
+=
1
}
},
parseFloat
(
props
.
duration
as
string
))
}
else
{
state
.
currentPercent
=
state
.
realPercent
}
}
packages/uni-components/src/components/progress/index.vue
已删除
100644 → 0
浏览文件 @
d700685c
<
template
>
<uni-progress
class=
"uni-progress"
v-bind=
"$attrs"
>
<div
:style=
"outerBarStyle"
class=
"uni-progress-bar"
>
<div
:style=
"innerBarStyle"
class=
"uni-progress-inner-bar"
/>
</div>
<template
v-if=
"showInfo"
>
<p
class=
"uni-progress-info"
>
{{
currentPercent
}}
%
</p>
</
template
>
</uni-progress>
</template>
<
script
>
const
VALUES
=
{
activeColor
:
'
#007AFF
'
,
backgroundColor
:
'
#EBEBEB
'
,
activeMode
:
'
backwards
'
}
export
default
{
name
:
'
Progress
'
,
props
:
{
percent
:
{
type
:
[
Number
,
String
],
default
:
0
,
validator
(
value
)
{
return
!
isNaN
(
parseFloat
(
value
,
10
))
}
},
showInfo
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
strokeWidth
:
{
type
:
[
Number
,
String
],
default
:
6
,
validator
(
value
)
{
return
!
isNaN
(
parseFloat
(
value
,
10
))
}
},
color
:
{
type
:
String
,
default
:
VALUES
.
activeColor
},
activeColor
:
{
type
:
String
,
default
:
VALUES
.
activeColor
},
backgroundColor
:
{
type
:
String
,
default
:
VALUES
.
backgroundColor
},
active
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
activeMode
:
{
type
:
String
,
default
:
VALUES
.
activeMode
}
},
data
()
{
return
{
currentPercent
:
0
,
strokeTimer
:
0
,
lastPercent
:
0
}
},
computed
:
{
outerBarStyle
()
{
return
`background-color:
${
this
.
backgroundColor
}
; height:
${
this
.
strokeWidth
}
px;`
},
innerBarStyle
()
{
// 兼容下不推荐的属性,activeColor 优先级高于 color。
let
backgroundColor
=
''
if
(
this
.
color
!==
VALUES
.
activeColor
&&
this
.
activeColor
===
VALUES
.
activeColor
)
{
backgroundColor
=
this
.
color
}
else
{
backgroundColor
=
this
.
activeColor
}
return
`width:
${
this
.
currentPercent
}
%;background-color:
${
backgroundColor
}
`
},
realPercent
()
{
// 确保最终计算时使用的是 Number 类型的值,并且在有效范围内。
let
realValue
=
parseFloat
(
this
.
percent
,
10
)
realValue
<
0
&&
(
realValue
=
0
)
realValue
>
100
&&
(
realValue
=
100
)
return
realValue
}
},
watch
:
{
realPercent
(
newValue
,
oldValue
)
{
this
.
strokeTimer
&&
clearInterval
(
this
.
strokeTimer
)
this
.
lastPercent
=
oldValue
||
0
this
.
_activeAnimation
()
}
},
created
()
{
this
.
_activeAnimation
()
},
methods
:
{
_activeAnimation
()
{
if
(
this
.
active
)
{
this
.
currentPercent
=
this
.
activeMode
===
VALUES
.
activeMode
?
0
:
this
.
lastPercent
this
.
strokeTimer
=
setInterval
(()
=>
{
if
(
this
.
currentPercent
+
1
>
this
.
realPercent
)
{
this
.
currentPercent
=
this
.
realPercent
this
.
strokeTimer
&&
clearInterval
(
this
.
strokeTimer
)
}
else
{
this
.
currentPercent
+=
1
}
},
30
)
}
else
{
this
.
currentPercent
=
this
.
realPercent
}
}
}
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录