fengyuanchen / vue-number-input Goto Github PK
View Code? Open in Web Editor NEWNumber input component for Vue.js.
Home Page: https://fengyuanchen.github.io/vue-number-input/
License: MIT License
Number input component for Vue.js.
Home Page: https://fengyuanchen.github.io/vue-number-input/
License: MIT License
When using round, min and max are ignored if the value is directly modified in the input.
Math.round
is using the value
passed to setValue
instead of the adjusted value to meet the min/max requirements.
setValue(value) {
const oldValue = this.value;
let newValue = typeof value !== 'number' ? parseFloat(value) : value;
if (!isNaN$1(newValue)) {
if (this.min <= this.max) {
newValue = Math.min(this.max, Math.max(this.min, newValue));
}
if (this.rounded) {
newValue = Math.round(value);
}
}
this.value = newValue;
...
It looks like updating the value passed to Math.round
to newValue
would correct the issue.
newValue = Math.round(newValue);
Hi Chen !
Is this lib ssr compatible ? All dist files have references to document
which choke up node.js when I try to run server-side ...
Thanks
Whenever I increase/decrease/change the value, setValue method gets executed twice: one by the propper method (increase for example) and a second time by the watcher. This also implies that the change event is emitted twice.
Hello, thank you for this awesome component.
I noticed that @change triggers when the component is loaded. If there are a lot of instances of number-input
on the page and there is some API call assigned to @change
it will trigger the API call for each instance of the component.
When just importing vue3 in a static page, I can't seem to use this (or maybe the instructions are just not showing this special case).
Partly following your Readme, I have this in the head:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script src="https://unpkg.com/vue-numeric-input"></script>
and this script section:
<script type="module">
import { createApp } from 'vue'
import VueNumberInput from '@chenfengyuan/vue-number-input';
const app = createApp({}).mount("#app")
app.component(VueNumberInput.name, VueNumberInput)
</script>
This fails with Uncaught TypeError: Failed to resolve module specifier "@chenfengyuan/vue-number-input". Relative references must start with either "/", "./", or "../".
How to change decimal precision seperator dot (.) to comma (,)?
Even with size="small" the control is much wider than I would expect for typical single/double-digit number entry. Could we have more size options, or better yet a width property?
Hi i want to hide the spinners from the number component. I have tried some css code but does not seem to work. Below is the code for hiding the css
`<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance:textfield;
}
</style>`
On mobile devices, making larger value changes using the buttons is a bit tedious - e.g. when using a small step size like 0.1. When tapping multiple times, browsers zoom into the page (iOS at least) and holding down the button does not change the value repeatedly (and possibly get faster over time).
(adding CSS touch-action: manipulation works for me for tapping)
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[Vue warn]: Error in nextTick: "TypeError: Cannot set property 'value' of undefined"
found in
---> <NumberInput>
<Pages/products/Slug/index.vue> at pages/products/_slug/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
when using with SSR
No error
setState()
(https://github.com/fengyuanchen/vue-number-input/blob/master/src/index.vue#L162) uses $refs
to access input
element.created
hook (https://github.com/fengyuanchen/vue-number-input/blob/master/src/index.vue#L101) when components isn't mounted and there is no $refs
Your componenet is working for example if you type 4.5
but does not allow 4,5
.
Not evry country is using .
. Switzerland is using comma ,
.
So do you have some i18n support or similar?
I user number-input as togglable component with v-else directive.
Each time I toggle component, the value of property in v-model or :model is reduced by 1.
Once a value is set on the input, it won't allow it to be deleted and set to null. Repro here:
https://fengyuanchen.github.io/vue-number-input/
This use case is important for optional values. A blank null value is a sentinel value which can signify to ignore whatever setting it represents.
How to detect click in plus and minus button? Its not enough to use @click="method". Because with this, computer cant differentiate whether the click come from plus button, minus button, or field input.
In my Vue 3 app I want to have a two-way binding for the vue-number-input value that is passed as a property from the parent component. Propagating the value back to the parent component doesn't work, however.
Parent component:
<template>
<TechnologyForm v-model:tti="tti"></TechnologyForm>
</template>
<script>
import { ref } from 'vue'
import TechnologyForm from '@/components/TechnologyForm.vue'
export default {
components: {
TechnologyForm
},
setup(){
const tti = ref()
return(tti)
}
}
Child component TechnologyForm
:
<template>
<vue-number-input :modelValue="tti" :min="1" @input="$emit('update:tti', $event.target.value)" placeholder="Years" inline controls rounded></vue-number-input>`
</template>
import VueNumberInput from '@chenfengyuan/vue-number-input'
export default {
props: ['tti'],
components: {
VueNumberInput
}
}
</script>
For other inputs it works fine, e.g.
<textarea :value="relevance" @input="$emit('update:relevance', $event.target.value)" class="form-control" id="relevance" rows="3"></textarea>
<number-input v-model="costs" :min="0" :step="0.01" rounded></number-input>
When we out input it rounded value to integer, not to float with step 0.01
In this case controls also not working.
I think it's bug.
Is there any way to change the overall size of the component?
Hi
I have problem with this event, it returns only newValue and oldValue, but I want to access to whole input object (like for example in input event) to detect which field is updated, because I'm using vue-number-input in a v-for loop...how I can do this? I tried using ref but it's not working with this component
How to disable editable of input element. User can edit only with controls.
I'm trying to implement my own rounding method, so my approach right now is, inside the @change:
updateAsset(newValue: number, oldValue: number): void {
this.value = Math.round(this.value / 100) * 100;
}
This doesn't work correctly, the functions aren't retriggered.
My workaround:
async updateAsset(newValue: number, oldValue: number): Promise<void> {
await this.nextTick();
this.value = Math.round(this.value / 100) * 100;
}
I can enter e.....eeeee-----.....eeee and the control accepts this a valid entry
I had trouble to get it to work with increment of a float number.
So I fixed some smelly code: here is the result of the rewrite: https://github.com/jointhepartypooper/PeercoinSim/blob/main/src/components/VueNumberInput.vue
With large size it shows two minuses on controls, instead of plus on right control https://screencast.com/t/RlHGZ2vgwi . Probably because html { font-size: 62.5%; } vertical line is just not visible.
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
Can't write in the input.
Write in the input.
<number-input v-model="value" :step="10" inlinecontrols></number-input>
Without the "v-model" all works fine.
vue-number-input version: 5.0.1
vue-number-input version: 5.0.0
vue-number-input version: 4.0.1
Browser:
- [x] Chrome (desktop) version XX
Others:
<number-input :id="'weight'" v-model="weight" :min="0.1" :max="75.0" :step="0.1" center controls></number-input>
If you increase the initial value (by plus button) you will see 0,30000000000000004
but not 0.3
.
Is it possible to disable styling entirely? I would like the editbox to show as a totally plain INPUT without any custom css.
Please add tabindex="-1"
for buttons, tab
buttons doesn't work between input
s
I am using this input as an optional field, so the user can provide null
value. On the other hand, when they set a value, I want it to be in range, so I provide min
and max
. But when null
value is passed, the error below gets shown.
Considering regular input
of type number
allows you to specify range, without providing anything, this seems to be a bug, that a warning would be raised for a valid usecase
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.