英文:
In Vuejs, how to fill value from input box from behind
问题
我有一个使用 Vue.js 和 Quasar 的项目。
我有一个输入字段，它初始化为10个零，只允许输入数字。
如果我想添加一个数字，它应该从后面填充。
"0000000000" -> 填充1
"0000000001" -> 填充2
"0000000012" -> 填充5
"0000000125" -> 删除最后一个字符
"0000000012" -> 填充3
"0000000123"
有什么想法如何实现这个？这是我目前的代码：
<template>
<div>
<q-input class="input" v-model="number" outlined label="number" mask="##########" minLength="10" maxlength="10" @input="onInput"/>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const number = ref("0000000000")
const onInput = (value) => {
if (value.length > 10) {
// 如果输入的数字超过了10位，删除多余的部分
value = value.slice(0, 10);
}
const numericValue = parseInt(value);
if (!isNaN(numericValue)) {
// 如果是有效的数字，更新输入字段的值
number.value = numericValue.toString().padStart(10, '0');
}
}
return {
number,
onInput
}
}
</script>
onInput函数现在应该按照您的要求进行填充和删除操作。
英文:
i have a project using Vue js and Quasar.
I have an input field that is initialized with 10 zeros that only allows numeric numbers.
If I want to add a number, it should fill it in from behind.
"0000000000" -> fill in 1
"0000000001" -> fill in 2
"0000000012" -> fill in 5
"0000000125" -> delete last character
"0000000012" -> fill in 3
"0000000123"
any ideas how i can achieve this? This is what i have currently:
<template>
<div>
<q-input class="input" v-model="number" outlined label="number" mask="##########" minLength="10" maxlength="10" @input="onInput"/>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const number = ref("0000000000")
}
return {
number
}
}
</script>
onInput does nothing so far
答案1
得分: 2
你应该使用
mask="#########" fill-mask="0" reverse-fill-mask
但它只适用于 maxlength="x" 和 mask="#*(x-1) (mask="#########")，不适用于 mask="#*x
英文:
You should use
mask="#########" fill-mask="0" reverse-fill-mask
But it only works well with maxlength="x" and mask="#*(x-1) ( mask="#########") and does not work with mask="#*x
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { createApp, ref } = Vue;
const app = createApp({
setup () {
const number1 = ref(0)
const number2 = ref('0000000000')
const onInput = (newVal) => {
number2.value = ('000000000'+ newVal).slice(-10);
}
return { number1, number2, onInput }
}
})
app.use(Quasar)
app.mount('#q-app')
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/quasar@2.11.7/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
Standard mask: <br/>
number1: {{number1}}
<q-input class="input" v-model="number1" outlined label="number" mask="##########" fill-mask="0" reverse-fill-mask minLength="10" maxlength="10" @update:model-value="onInput"></q-input><br/>
Custom mask: <br/>
number2: {{number2}}<br/>
<q-input class="input" v-model="number2" outlined label="number" minLength="10" @update:model-value="onInput"></q-input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.11.7/dist/quasar.umd.prod.js"></script>
<!-- end snippet -->
答案2
得分: 2
你可以使用String.prototype.padStart函数在字符串达到特定长度之前添加前导零字符。
只需在每次更改时相应地更新 v-model。
<script setup>
import { ref, watch } from 'vue'
const counter = ref('')
watch(counter, () => {
// 移除前导 0
counter.value = counter.value.substring(Array.from(counter.value).findIndex(v => v !== '0'))
// 如有必要，添加前导 0
counter.value = counter.value.padStart(8, '0')
})
</script>
<template>
<input v-model="counter" placeholder="输入数字">
</template>
这里是在线演示。
英文:
You can use the function String.prototype.padStart to add leading 0 characters until a certain string lenght.
Just update the v-model accordingly whenever it changes.
<script setup>
import { ref, watch } from 'vue'
const counter = ref('')
watch(counter, () => {
// remove leading 0
counter.value = counter.value.substring(Array.from(counter.value).findIndex(v => v !== '0'))
// add leading 0 if necessary
counter.value = counter.value.padStart(8, '0')
})
</script>
<template>
<input v-model="counter" placeholder="Enter a number">
</template>
Here is the live demo
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论