Skip to content

Instantly share code, notes, and snippets.

@drakakisgeo
Last active October 19, 2018 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drakakisgeo/a619a8b20d2a6cae7633bce911645b0c to your computer and use it in GitHub Desktop.
Save drakakisgeo/a619a8b20d2a6cae7633bce911645b0c to your computer and use it in GitHub Desktop.
Vue input field for money. ( Masks amount and always return a decimal )
<template>
<cleave v-model="money" :options="options"></cleave>
</template>
<script>
import Cleave from 'vue-cleave-component';
export default {
props:{
value: {
type: [String,Number]
},
numeralDecimalScale:{
type: Number ,
default:2
},
numeralDecimalMark:{
type: String ,
default:','
},
delimiter:{
type: String ,
default:'.'
}
},
data: function () {
return {
money: '',
options: {
numeral: true,
numeralDecimalScale: this.numeralDecimalScale,
numeralDecimalMark: this.numeralDecimalMark,
delimiter: this.delimiter
}
}
},
watch: {
money: function (money) {
this.$emit('input', parseFloat(money));
},
value: function (money) {
this.money = money;
}
},
name: "amount",
components: {Cleave},
mounted: function () {
this.money = this.value;
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment