https://github.com/vuejs-tips/v-money
Tiny (<2k gzipped) input/directive mask for currency
https://github.com/vuejs-tips/v-money
Last synced: 8 months ago
JSON representation
Tiny (<2k gzipped) input/directive mask for currency
- Host: GitHub
- URL: https://github.com/vuejs-tips/v-money
- Owner: vuejs-tips
- Created: 2017-06-12T14:45:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T19:27:15.000Z (over 5 years ago)
- Last Synced: 2025-04-04T05:08:58.656Z (8 months ago)
- Language: JavaScript
- Homepage: https://vuejs-tips.github.io/v-money/
- Size: 176 KB
- Stars: 778
- Watchers: 11
- Forks: 256
- Open Issues: 70
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-zh - V-钱 - 用于货币的微小 (\<2k gzipped) 输入/指令掩码 (UI组件 / 形成)
- awesome-vue - v-money - Tiny (<2k gzipped) input/directive mask for currency (Components & Libraries / UI Components)
- awesome-vue - v-money ★330 - Tiny (<2k gzipped) input/directive mask for currency (UI Components / Form)
- awesome-vue - v-money - Tiny (`<2k gzipped) input/directive mask for currency ` 📝 4 years ago` (UI Components [🔝](#readme))
- awesome-vue - v-money - Tiny (<2k gzipped) input/directive mask for currency (UI Components / Form)
README
# v-money Mask for Vue.js
## Features
- Lightweight (<2KB gzipped)
- Dependency free
- Mobile support
- Component or Directive flavors
- Accept copy/paste
- Editable
For other types of mask, use [vue-the-mask](https://vuejs-tips.github.io/vue-the-mask)
## Usage
### A. Globally
```js
import Vue from 'vue'
import money from 'v-money'
// register directive v-money and component
Vue.use(money, {precision: 4})
```
### B. Use as component: https://jsfiddle.net/auom8st8/
```html
{{price}}
import {Money} from 'v-money'
export default {
components: {Money},
data () {
return {
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
suffix: ' #',
precision: 2,
masked: false
}
}
}
}
```
### C. Use as directive: https://jsfiddle.net/nj3cLoum/2/
Must use `vmodel.lazy` to bind works properly.
```html
{{price}}
import {VMoney} from 'v-money'
export default {
data () {
return {
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
suffix: ' #',
precision: 2,
masked: false /* doesn't work with directive */
}
}
},
directives: {money: VMoney}
}
```
## Properties
| property | Required | Type | Default | Description |
|-----------|----------|---------|---------|---------------------------------------------------------|
| precision | **true** | Number | 2 | How many decimal places |
| decimal | false | String | "." | Decimal separator |
| thousands | false | String | "," | Thousands separator |
| prefix | false | String | "" | Currency symbol followed by a Space, like "R$ " |
| suffix | false | String | "" | Percentage for example: " %" |
| masked | false | Boolean | false | If the component output should include the mask or not |
### References
- https://en.wikipedia.org/wiki/Decimal_mark
- https://docs.oracle.com/cd/E19455-01/806-0169/overview-9/index.html
- http://www.xe.com/symbols.php
- https://github.com/kevinongko/vue-numeric
- https://github.com/plentz/jquery-maskmoney