|
|
@@ -16,104 +16,88 @@ app.use(Price);
|
|
|
```
|
|
|
|
|
|
|
|
|
-### Support three sizes:small、normal、large
|
|
|
+### Price size
|
|
|
+
|
|
|
+Three sizes are supported: small, normal, and large, and the default is normal.
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
``` html
|
|
|
<template>
|
|
|
- <nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
|
|
|
- <nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
|
|
|
- <nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
|
|
|
+ <nut-price :price="0" size="small" :need-symbol="false" />
|
|
|
+ <nut-price :price="0" size="normal" :need-symbol="false" />
|
|
|
+ <nut-price :price="0" size="large" :need-symbol="false" />
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
:::
|
|
|
|
|
|
-### No decimals
|
|
|
+### Decimals places
|
|
|
+
|
|
|
+`decimal-digits` can set the number of decimal places, and 2 decimal places are displayed by default.
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
``` html
|
|
|
<template>
|
|
|
- <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
|
|
|
+ <nut-price :price="8888" :decimal-digits="0" />
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
:::
|
|
|
|
|
|
-### With RMB symbol, no thousands separator
|
|
|
+### Currency symbol
|
|
|
+
|
|
|
+`symbol` can set the currency symbol, the default is `¥`.
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
``` html
|
|
|
|
|
|
<template>
|
|
|
- <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
|
|
|
+ <nut-price :price="10010.01" symbol="¥" />
|
|
|
</template>
|
|
|
```
|
|
|
:::
|
|
|
-### With RMB symbol, separated by thousands, keep three decimal places
|
|
|
+### Currency symbol position
|
|
|
+
|
|
|
+`position` can adjust the currency symbol position.
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
``` html
|
|
|
<template>
|
|
|
- <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
|
|
|
+ <nut-price :price="8888.01" position="after" symbol="元" />
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
:::
|
|
|
|
|
|
-### Adjust the symbol position
|
|
|
+### Thousands separator
|
|
|
|
|
|
-:::demo
|
|
|
-
|
|
|
-``` html
|
|
|
-<template>
|
|
|
- <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
|
|
|
-</template>
|
|
|
-```
|
|
|
-
|
|
|
-:::
|
|
|
-### Asynchronous random changes
|
|
|
+`thousands` can be displayed as thousands.
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
``` html
|
|
|
<template>
|
|
|
- <nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
|
|
|
+ <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
|
|
|
</template>
|
|
|
-
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
- import { ref } from 'vue';
|
|
|
- export default {
|
|
|
- setup() {
|
|
|
- const price = ref(0);
|
|
|
- setInterval(() => {
|
|
|
- price.value = Math.random()*10000000;
|
|
|
- }, 1000);
|
|
|
- return {
|
|
|
- price
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
```
|
|
|
+
|
|
|
:::
|
|
|
## API
|
|
|
### Props
|
|
|
|
|
|
| Attribute | Description | Type | Default |
|
|
|
|----------------|------------------------------------------------------------|------------------|--------|
|
|
|
-| price | Price | Number | String | 0 |
|
|
|
-| need-symbol | Add symbol | Boolean | true |
|
|
|
-| symbol | Symbol type | String | ¥ |
|
|
|
-| decimal-digits | Decimal digits | Number | 2 |
|
|
|
-| thousands | Thousands separation | Boolean | false |
|
|
|
-| position | The symbol appear before or after the price,`before`、`after` | String | before |
|
|
|
-| size | Size,`large`、`normal`、`small` | String | large |
|
|
|
+| price | Price | number | string | 0 |
|
|
|
+| need-symbol | Add symbol | boolean | true |
|
|
|
+| symbol | Symbol type | string | ¥ |
|
|
|
+| decimal-digits | Decimal digits | number | 2 |
|
|
|
+| thousands | Thousands separation | boolean | false |
|
|
|
+| position | The symbol appear before or after the price,`before`、`after` | string | before |
|
|
|
+| size | Size,`small`、`normal`、`large` | string | large |
|
|
|
|
|
|
## Theming
|
|
|
|
|
|
@@ -121,14 +105,14 @@ app.use(Price);
|
|
|
|
|
|
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
|
|
|
|
|
|
-| Name | Default Value | Description |
|
|
|
-| --------------------------------------- | -------------------------- | ---- |
|
|
|
-| --nut-price-symbol-big-size| _18px_ | - |
|
|
|
-| --nut-price-big-size| _24px_ | - |
|
|
|
-| --nut-price-decimal-big-size| _18px_ | - |
|
|
|
-| --nut-price-symbol-medium-size| _14px_ | - |
|
|
|
-| --nut-price-medium-size| _16px_ | - |
|
|
|
-| --nut-price-decimal-medium-size| _14px_ | - |
|
|
|
-| --nut-price-symbol-small-size| _10px_ | - |
|
|
|
-| --nut-price-small-size| _12px_ | - |
|
|
|
-| --nut-price-decimal-small-size| _10px_ | - |
|
|
|
+| Name | Default Value |
|
|
|
+| --------------------------------------- | -------------------------- |
|
|
|
+| --nut-price-symbol-big-size| _18px_ |
|
|
|
+| --nut-price-big-size| _24px_ |
|
|
|
+| --nut-price-decimal-big-size| _18px_ |
|
|
|
+| --nut-price-symbol-medium-size| _14px_ |
|
|
|
+| --nut-price-medium-size| _16px_ |
|
|
|
+| --nut-price-decimal-medium-size| _14px_ |
|
|
|
+| --nut-price-symbol-small-size| _10px_ |
|
|
|
+| --nut-price-small-size| _12px_ |
|
|
|
+| --nut-price-decimal-small-size| _10px_ |
|