Price
Core component for e-commerce to display product prices in a standardized way. Supports amount splitting, range display, thousand separators, and animated number updates.
Basic Usage
Standard price display with two decimal places and the default currency symbol. You can also move the symbol behind the number or enable the approximate mark.
Price Range
Use max-value to render a price range, which is common in SKU listings and product collections.
E-commerce Expansion
Combine tags, original-price display, unit labels, and gradient text to match richer retail card layouts.
Sizes
Built-in presets are available for small, default, and large. You can still customize the final size with CSS or theme variables.
More Features
Standard struck-through prices and thousand separators are built in, so common retail price patterns can be composed without extra markup.
Use in Nuxt
YhPrice can be used directly in Nuxt 3/4 after registering @yh-ui/nuxt. If you enable animated, update the bound value on the client when you want the animation to start after hydration.
API
Props
| Property | Description | Type | Default |
|---|---|---|---|
| value | Current price value | number | string | 0 |
| max-value | Maximum price used for range display | number | string | undefined |
| symbol | Currency symbol | string | '¥' |
| symbol-position | Currency symbol position | 'before' | 'after' | 'before' |
| precision | Decimal precision | number | 2 |
| line-through | Whether to render the main price as struck through | boolean | false |
| size | Built-in size preset | 'small' | 'default' | 'large' | string | 'default' |
| split | Whether to split integer and decimal font sizes | boolean | true |
| decimal-scale | Decimal font-size ratio | number | 0.8 |
| thousandth | Whether to insert thousand separators | boolean | true |
| bold | Whether to apply bold weight | boolean | false |
| prefix | Prefix text | string | '' |
| suffix | Suffix text | string | '' |
| unit | Unit label, such as /kg | string | '' |
| delete-value | Secondary original price value | number | string | undefined |
| delete-label | Label shown before the deleted price | string | '' |
| tag | Tag text shown before the price | string | '' |
| tag-type | Tag visual type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' |
| approx | Whether to prepend an approximate mark | boolean | false |
| animated | Whether to animate value changes | boolean | false |
| gradient | Gradient text mode | boolean | string[] | false |
| theme-overrides | Component-level theme variable overrides | Record<string, string> | {} |
Events
This component does not expose component events.
Slots
| Slot | Description | Parameters |
|---|---|---|
| tag | Custom tag content | - |
| prefix | Custom prefix content | - |
| symbol | Custom currency symbol content | - |
| unit | Custom unit content | - |
| suffix | Custom suffix content | - |
Expose
This component does not expose public instance methods or properties.
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-price-color | Primary price color | var(--yh-color-danger) |
--yh-price-font-family | Price font family | var(--yh-font-family) |
--yh-price-integer-size | Base integer font size | 1.25em |
--yh-price-symbol-size | Base symbol font size | 0.75em |
--yh-price-decimal-scale | Decimal part scale | 0.8 |
--yh-price-tag-bg | Badge background color | var(--yh-color-danger) |
Type Exports
| Name | Description |
|---|---|
YhPriceProps | Component props type |
YhPriceSlots | Component slots type |
YhPriceInstance | Component instance type |