Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
f416319b
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,发现更多精彩内容 >>
提交
f416319b
编写于
3月 17, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
upd: review price
上级
9ff06c86
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
60 addition
and
37 deletion
+60
-37
src/packages/price/demo.vue
src/packages/price/demo.vue
+19
-1
src/packages/price/doc.md
src/packages/price/doc.md
+26
-23
src/packages/price/index.scss
src/packages/price/index.scss
+8
-4
src/packages/price/index.vue
src/packages/price/index.vue
+7
-9
未找到文件。
src/packages/price/demo.vue
浏览文件 @
f416319b
...
...
@@ -17,14 +17,32 @@
:thousands=
"true"
/>
</nut-cell>
<h2>
异步随机变更
</h2>
<nut-cell>
<nut-price
:price=
"price"
:decimal-digits=
"3"
:need-symbol=
"true"
:thousands=
"true"
/>
</nut-cell>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
createComponent
}
from
'
@/utils/create
'
;
import
{
ref
}
from
'
vue
'
;
const
{
createDemo
}
=
createComponent
(
'
price
'
);
export
default
createDemo
({
props
:
{}
setup
()
{
const
price
=
ref
(
0
);
setInterval
(()
=>
{
price
.
value
=
Math
.
random
()
*
10000000
;
},
1000
);
return
{
price
};
}
});
</
script
>
...
...
src/packages/price/doc.md
浏览文件 @
f416319b
...
...
@@ -20,40 +20,43 @@ app.use(Price);
### 基本用法
```
html
<nut-price
:price=
"1010"
:need-symbol=
"false"
:thousands=
"true"
/>
<nut-price
:price=
"1010"
:need-symbol=
"false"
:thousands=
"true"
/>
```
### 有人民币符号,无千位分隔
```
html
<nut-price
:price=
"10010.01"
:need-symbol=
"true"
:thousands=
"false"
/>
<nut-price
:price=
"10010.01"
:need-symbol=
"true"
:thousands=
"false"
/>
```
### 带人民币符号,有千位分隔,保留小数点后三位
```
html
<nut-price
:price=
"15213.122"
:decimal-digits=
"3"
:need-symbol=
"true"
:thousands=
"true"
/>
<nut-price
:price=
"15213.1221"
:decimal-digits=
"3"
:need-symbol=
"true"
:thousands=
"true"
/>
```
### 异步随机变更
```
html
<nut-price
:price=
"price"
:decimal-digits=
"3"
:need-symbol=
"true"
:thousands=
"true"
/>
```
```
javascript
setup
()
{
const
price
=
ref
(
0
);
setInterval
(()
=>
{
price
.
value
=
Math
.
random
()
*
10000000
;
},
1000
);
return
{
price
};
}
```
### Prop
|字段|说明|类型|默认值|
|--|--|--|--|
|price|价格数量|Number|0|
|need-symbol|是否需要加上人民币符号|Boolean|true|
|symbol|符号类型|String|"$"|
|decimal-digits|小数位位数|Number|2|
|thousands|是否按照千分号形式显示|Boolean|false|
\ No newline at end of file
| 字段 | 说明 | 类型 | 默认值 |
|----------------|--------------------------|---------|--------|
| price | 价格数量 | Number | 0 |
| need-symbol | 是否需要加上 symbol 符号 | Boolean | true |
| symbol | 符号类型 | String |
¥
|
| decimal-digits | 小数位位数 | Number | 2 |
| thousands | 是否按照千分号形式显示 | Boolean | false |
\ No newline at end of file
src/packages/price/index.scss
浏览文件 @
f416319b
...
...
@@ -2,13 +2,17 @@
font-size
:
$font-size-3
;
display
:
inline
;
color
:
$primary-color
;
.price-symbol
{
font-size
:
$font-size-4
;
&
--symbol
{
font-size
:
$font-size-3
;
margin-right
:
4px
;
}
&
--big
{
font-size
:
$price-big-size
;
}
.price-big
{
&
--point
{
font-size
:
$price-big-size
;
}
.price
-small
{
&
-
-small
{
font-size
:
$font-size-4
;
}
}
src/packages/price/index.vue
浏览文件 @
f416319b
...
...
@@ -19,7 +19,7 @@ export default create({
},
symbol
:
{
type
:
String
,
default
:
'
$
'
default
:
'
¥
'
},
decimalDigits
:
{
type
:
Number
,
...
...
@@ -34,7 +34,7 @@ export default create({
setup
(
props
)
{
const
priceShow
=
computed
(()
=>
{
const
symbol
=
props
.
needSymbol
?
`<view class="
price
-symbol">
${
props
.
symbol
}
</view>`
?
`<view class="
${
componentName
}
-
-symbol">
${
props
.
symbol
}
</view>`
:
''
;
return
symbol
+
formatToHump
(
props
.
price
);
});
...
...
@@ -61,13 +61,11 @@ export default create({
};
const
renderPrice
=
(
price
:
string
[]
|
string
)
=>
{
return
`<view class="price-big">
${
formatThousands
(
typeof
price
===
'
string
'
?
price
:
price
[
0
])}
</view>
<view class="price-point">.</view>
<view class="price-small">
${
formatDecimal
(
typeof
price
===
'
string
'
?
0
:
price
[
1
])}
</view>`
;
return
`<view class="
${
componentName
}
--big">
${
formatThousands
(
typeof
price
===
'
string
'
?
price
:
price
[
0
]
)}
</view><view class="
${
componentName
}
--point">.</view><view class="
${
componentName
}
--small">
${
formatDecimal
(
typeof
price
===
'
string
'
?
0
:
price
[
1
]
)}
</view>`
;
};
const
formatToHump
=
(
price
:
string
|
number
)
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录