Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
ca860f78
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
ca860f78
编写于
11月 25, 2021
作者:
D
Drjnigfubo
1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: circleprogress,toast文档优化
上级
c56e55cb
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
53 addition
and
68 deletion
+53
-68
src/packages/__VUE/circleprogress/demo.vue
src/packages/__VUE/circleprogress/demo.vue
+3
-8
src/packages/__VUE/circleprogress/doc.md
src/packages/__VUE/circleprogress/doc.md
+4
-2
src/packages/__VUE/circleprogress/index.taro.vue
src/packages/__VUE/circleprogress/index.taro.vue
+22
-29
src/packages/__VUE/circleprogress/index.vue
src/packages/__VUE/circleprogress/index.vue
+7
-16
src/packages/__VUE/toast/doc.md
src/packages/__VUE/toast/doc.md
+12
-3
src/sites/mobile-taro/vue/src/feedback/pages/circleprogress/index.vue
...bile-taro/vue/src/feedback/pages/circleprogress/index.vue
+5
-10
未找到文件。
src/packages/__VUE/circleprogress/demo.vue
浏览文件 @
ca860f78
...
...
@@ -7,23 +7,18 @@
<h2>
环形进度条自定义样式
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"50"
:progress-option=
"progressOption"
>
</nut-circleprogress>
<nut-circleprogress
:progress=
"50"
:progress-option=
"progressOption"
>
</nut-circleprogress>
</div>
<h2>
环形进度条自定义内容
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"50"
:is-auto=
"isAuto"
>
<
slot>
自定义
</slot
>
<
div>
自定义
</div
>
</nut-circleprogress>
</div>
<h2>
动态改变环形进度条的进度
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"percent"
:progress-option=
"progressOption"
:stroke-inner-width=
"strokeInnerWidth"
>
<nut-circleprogress
:progress=
"percent"
:progress-option=
"progressOption"
:stroke-inner-width=
"strokeInnerWidth"
>
</nut-circleprogress>
</div>
<div
class=
"demo__btn"
>
...
...
src/packages/__VUE/circleprogress/doc.md
浏览文件 @
ca860f78
...
...
@@ -32,7 +32,9 @@ app.use(CirecleProgress);
### 环形进度条自定义内容
```
html
<nut-circleprogress
progress=
"50"
:is-auto=
"true"
></nut-circleprogress>
<nut-circleprogress
progress=
"50"
:is-auto=
"true"
>
<div>
自定义
</div>
</nut-circleprogress>
```
### 动态改变环形进度条的进度
...
...
@@ -84,5 +86,5 @@ app.use(CirecleProgress);
|----- | ----- | ----- | -----
| progress | 百分比 | Number,String | 必传项,无默认值
| stroke-inner-width | 圆弧的宽度 | Number,String | 10
| is-auto | 是否自定义内容显示
(taro暂不支持)
| Boolean | false
| is-auto | 是否自定义内容显示 | Boolean | false
| progress-option | 外圆相关参数对象,其中包括半径,宽度,背景颜色,进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}
src/packages/__VUE/circleprogress/index.taro.vue
浏览文件 @
ca860f78
...
...
@@ -6,7 +6,13 @@
<div
class=
"nut-circleprogress__line__c"
:style=
"RightStyle"
></div>
</div>
</div>
<div
class=
"nut-circleprogress__progress"
>
{{
progress
}}
%
</div>
<div
class=
"nut-circleprogress__progress"
>
<template
v-if=
"!isAuto"
>
<slot>
{{
progress
}}
%
</slot>
</
template
>
<
template
v-else
><slot></slot></
template
>
</div>
<div
class=
"nut-circleprogress__left"
>
<div
class=
"nut-circleprogress__line nut-circleprogress__l"
>
<div
class=
"nut-circleprogress__line__c"
:style=
"LeftStyle"
></div>
...
...
@@ -14,11 +20,7 @@
</div>
</div>
<div
v-else
>
<svg
:height=
"option.size"
:width=
"option.size"
x-mlns=
"http://www.w3.org/200/svg"
>
<svg
:height=
"option.size"
:width=
"option.size"
x-mlns=
"http://www.w3.org/200/svg"
>
<circle
:r=
"option.radius"
:cx=
"option.cx"
...
...
@@ -40,7 +42,12 @@
style=
"transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s"
/>
</svg>
<div
class=
"nut-circleprogress__progress"
>
{{
progress
}}
%
</div>
<div
class=
"nut-circleprogress__progress"
>
<
template
v-if=
"!isAuto"
>
<slot>
{{
progress
}}
%
</slot>
</
template
>
<
template
v-else
><slot></slot></
template
>
</div>
</div>
</div>
</template>
...
...
@@ -136,15 +143,9 @@ export default create({
transform
:
`rotate(
${
rotateRight
.
value
+
'
deg
'
}
)`
,
transition
:
`all 0.3s`
,
borderTop
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderLeft
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderBottom
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
,
borderRight
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
borderLeft
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderBottom
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
,
borderRight
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
};
});
const
LeftStyle
=
computed
(()
=>
{
...
...
@@ -153,15 +154,9 @@ export default create({
transform
:
`rotate(
${
rotateLeft
.
value
+
'
deg
'
}
)`
,
transition
:
`all 0.3s`
,
borderTop
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderLeft
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderBottom
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
,
borderRight
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
borderLeft
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
backColor
}
;`
,
borderBottom
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
,
borderRight
:
`
${
InnerWidth
.
value
+
'
px
'
}
solid
${
cricleData
.
progressColor
}
;`
};
});
const
option
=
computed
(()
=>
{
...
...
@@ -178,11 +173,9 @@ export default create({
};
Object
.
assign
(
baseOption
,
props
.
progressOption
);
// 圆心位置自动生成
baseOption
.
cy
=
baseOption
.
cx
=
baseOption
.
radius
+
baseOption
.
strokeOutWidth
;
baseOption
.
cy
=
baseOption
.
cx
=
baseOption
.
radius
+
baseOption
.
strokeOutWidth
;
baseOption
.
size
=
(
baseOption
.
radius
+
baseOption
.
strokeOutWidth
)
*
2
;
baseOption
.
startPosition
=
'
rotate(-90,
'
+
baseOption
.
cx
+
'
,
'
+
baseOption
.
cy
+
'
)
'
;
baseOption
.
startPosition
=
'
rotate(-90,
'
+
baseOption
.
cx
+
'
,
'
+
baseOption
.
cy
+
'
)
'
;
return
baseOption
;
});
const
arcLength
=
computed
(()
=>
{
...
...
src/packages/__VUE/circleprogress/index.vue
浏览文件 @
ca860f78
<
template
>
<div
:class=
"classes"
:style=
"
{ height: option.size + 'px', width: option.size + 'px' }"
>
<svg
:height=
"option.size"
:width=
"option.size"
x-mlns=
"http://www.w3.org/200/svg"
>
<div
:class=
"classes"
:style=
"
{ height: option.size + 'px', width: option.size + 'px' }">
<svg
:height=
"option.size"
:width=
"option.size"
x-mlns=
"http://www.w3.org/200/svg"
>
<circle
:r=
"option.radius"
:cx=
"option.cx"
...
...
@@ -30,9 +23,9 @@
/>
</svg>
<div
class=
"nut-circleprogress-content"
>
<template
v-if=
"!isAuto"
><slot>
{{
progress
}}
%
</slot></
template
>
<template
v-if=
"!isAuto"
>
<slot>
{{
progress
}}
%
</slot>
</
template
>
<
template
v-else
><slot></slot></
template
>
</div>
</div>
...
...
@@ -82,11 +75,9 @@ export default create({
};
Object
.
assign
(
baseOption
,
props
.
progressOption
);
// 圆心位置自动生成
baseOption
.
cy
=
baseOption
.
cx
=
baseOption
.
radius
+
baseOption
.
strokeOutWidth
;
baseOption
.
cy
=
baseOption
.
cx
=
baseOption
.
radius
+
baseOption
.
strokeOutWidth
;
baseOption
.
size
=
(
baseOption
.
radius
+
baseOption
.
strokeOutWidth
)
*
2
;
baseOption
.
startPosition
=
'
rotate(-90,
'
+
baseOption
.
cx
+
'
,
'
+
baseOption
.
cy
+
'
)
'
;
baseOption
.
startPosition
=
'
rotate(-90,
'
+
baseOption
.
cx
+
'
,
'
+
baseOption
.
cy
+
'
)
'
;
return
baseOption
;
});
const
arcLength
=
computed
(()
=>
{
...
...
src/packages/__VUE/toast/doc.md
浏览文件 @
ca860f78
...
...
@@ -36,14 +36,15 @@ import { Toast } from '@nutui/nutui';
export
default
{
setup
()
{
Toast
.
text
(
'
网络失败,请稍后再试~
'
);
Toast
.
text
(
msg
,{
title
:
'
标题文字
'
});
return
{};
},
};
```
#### 标题提示
```
javascript
Toast
.
text
(
msg
,{
title
:
'
标题文字
'
});
```
#### 成功提示
```
javascript
...
...
@@ -75,6 +76,14 @@ Toast.text(msg,{
duration
:
0
});
```
#### Toast自定义底部高度
```
javascript
Toast
.
text
(
msg
,
{
center
:
false
,
bottom
:
'
10%
'
});
```
#### Loading带透明罩
```
javascript
...
...
src/sites/mobile-taro/vue/src/feedback/pages/circleprogress/index.vue
浏览文件 @
ca860f78
...
...
@@ -7,23 +7,18 @@
<h2>
环形进度条自定义样式
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"50"
:progress-option=
"progressOption"
>
</nut-circleprogress>
<nut-circleprogress
:progress=
"20"
:progress-option=
"progressOption"
>
</nut-circleprogress>
</div>
<h2>
环形进度条自定义内容
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"
5
0"
:is-auto=
"isAuto"
>
<
slot>
自定义
</slot
>
<nut-circleprogress
:progress=
"
6
0"
:is-auto=
"isAuto"
>
<
div>
自定义
</div
>
</nut-circleprogress>
</div>
<h2>
动态改变环形进度条的进度
</h2>
<div
class=
"demo__piece"
>
<nut-circleprogress
:progress=
"percent"
:progress-option=
"progressOption"
:stroke-inner-width=
"strokeInnerWidth"
>
<nut-circleprogress
:progress=
"percent"
:progress-option=
"progressOption"
:stroke-inner-width=
"strokeInnerWidth"
>
</nut-circleprogress>
</div>
<div
class=
"demo__btn"
>
...
...
@@ -42,7 +37,7 @@ export default {
radius
:
50
,
strokeOutWidth
:
10
,
backColor
:
'
#d9d9d9
'
,
progressColor
:
'
red
'
progressColor
:
'
blue
'
});
const
percent
=
ref
(
50
);
const
strokeInnerWidth
=
ref
(
10
);
...
...
richard_1015
@u011978868
mentioned in commit
33f9cdff
·
1月 07, 2022
mentioned in commit
33f9cdff
mentioned in commit 33f9cdffabd99447f1bb561e1db2d0af39f314e7
开关提交列表
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录