@empathyco/x-components
Version:
Empathy X Components
68 lines (49 loc) • 3.85 kB
Markdown
---
title: BaseResultPreviousPrice
---
# BaseResultPreviousPrice
Component that renders the @empathyco/x-types#Result previous price.
## Props
| Name | Description | Type | Default |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | (Required) The @empathyco/x-types#Result information. | <code>Result</code> | <code></code> |
| <code>format</code> | Format or mask to be defined as string.<br />- Use 'i' to define integer numbers.<br />- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the<br />doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.<br />- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.<br />- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more<br />than one character.<br />- Set whatever you need around the integers and decimals marks. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------ | -------------------------------------------- |
| <code>default</code> | Base currency item | **result** <code>result</code> - Result data |
## Examples
### Basic example
This component shows the previous price formatted if it has discount. The component has two optional
props. `format` to select the currency format to be applied.
```vue
<template>
<BaseResultPreviousPrice :result="result" :format="'i.iii,ddd €'" />
</template>
<script>
import { BaseResultPreviousPrice } from '@empathyco/x-components'
export default {
name: 'BaseResultPreviousPriceDemo',
components: {
BaseResultPreviousPrice,
},
}
</script>
```
### Overriding default slot
```vue
<template>
<BaseResultPreviousPrice :result="result">
<span class="custom-base-result-previous-price">{{ result.price.originalValue }}</span>
</BaseResultPreviousPrice>
</template>
<script>
import { BaseResultPreviousPrice } from '@empathyco/x-components'
export default {
name: 'BaseResultPreviousPriceDemo',
components: {
BaseResultPreviousPrice,
},
}
</script>
```