2 min read
BaseCurrency
BaseCurrency
Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
Regarding the format or mask to be defined as string:
- Use 'i' to define integer numbers.
- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.
- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.
- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character.
- If you want to hide the decimal part if it's zero, you can add the
?
symbol after the decimal characters (e.g. 'i.iii,dd?', for1234
you would get1.234
instead of1.234,00
). - Set whatever you need around the integers and decimals marks.
- Default mask: 'i.iii,dd' which returns '1.345,67'.
Props
Name | Description | Type | Default |
---|---|---|---|
value | Numeric value to be formatted. | number |
|
format | The format as string. | string |
|
Example
Renders the value received as a property, which always must be a JavaScript number, with the proper format provided as string property. The rendered tag is a span in order to render a default inline HTML element.
Basic usage
<template>
<BaseCurrency :value="12345678.87654321" />
<!-- output: '12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
<!-- output: '12.345.678,876 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678" format="i.iii,ddd? €" />
<!-- output: '12.345.678 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
<!-- output: '$ 12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
<!-- output: '$12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
<!-- output: '12.345.678,87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
<!-- output: '12.345.678,87€' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
<!-- output: '12,345,678.87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
<!-- output: '12 345 678.87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
<!-- output: '12 345 678 - 87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
<!-- output: '12.345.678,876543 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
<!-- output: '12.345.678,870000 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678" format="i.iii,dddddd €" />
<!-- output: '12.345.678,000000 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
<!-- output: '12.345.678,87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii €" />
<!-- output: '12.345.678 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components';
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency
}
};
</script>