Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
vue-numeric
Advanced tools
Readme
Input field component to display a formatted currency value based on Vue.
Works with Vue 2.*
<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>
<script>
Vue.use(VueNumeric.default)
</script>
$ npm install vue-numeric --save
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
}
}
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
Vue.use(VueNumeric)
<template>
<vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>
<script>
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
},
data: () => ({
price: ''
}),
}
</script>
Set the currency
prop to add a currency symbol within the input.
<vue-numeric currency="$"></vue-numeric>
Limit the minimum and maximum value by using min
and max
props.
min
defaults to 0
.min
and max
accept String
or Number
values.<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>
minus
defaults to false
(no negative numbers).
<vue-numeric v-bind:minus="false"></vue-numeric>
By default the decimal value is disabled. To use decimals in the value, add the precision
prop.
precision
accept a String
or Number
numeric value.<vue-numeric v-bind:precision="2"></vue-numeric>
,
.separator
prop to change the thousands separator.separator
only accepts space
, ,
or .
..
or space
as thousand separator, the decimal separator will be ,
.<vue-numeric separator="."></vue-numeric>
<vue-numeric placeholder="only number allowed"></vue-numeric>
By default, when you clean the input the value is set to 0
. You can change this value to fit your needs.
<vue-numeric :empty-value="1"></vue-numeric>
By default the value emitted for the input event is of type Number
. However you may choose to get a String
instead
by setting the property output-type
to String
.
<vue-numeric output-type="String"></vue-numeric>
Props | Description | Required | Type | Default |
---|---|---|---|---|
currency | Currency prefix | false | String | - |
currency-symbol-position | Position of the symbol (accepted values: prefix or suffix ) | false | String | prefix |
max | Maximum value allowed | false | Number | 9007199254740991 |
min | Minimum value allowed | false | Number | -9007199254740991 |
minus | Enable/disable negative values | false | Boolean | false |
placeholder | Input placeholder | false | String | - |
empty-value | Value when input is empty | false | Number | 0 |
output-type | Output Type for input event | false | String | Number |
precision | Number of decimals | false | Number | - |
separator | Thousand separator symbol (accepts space , . or , ) | false | String | , |
decimal-separator | Custom decimal separator | false | String | - |
thousand-separator | Custom thousand separator | false | String | - |
read-only | Hide input field and show the value as text | false | Boolean | false |
read-only-class | Class for read-only element | false | String | '' |
allow-clear | Use input type search | false | Boolean | false |
Vue-Numeric is open-sourced software licensed under the MIT license
Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks :smiley:
FAQs
Input field component to display currency value based on Vue.
The npm package vue-numeric receives a total of 7,434 weekly downloads. As such, vue-numeric popularity was classified as popular.
We found that vue-numeric demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.