Javascript Vuetify 中是否有特定的数字输入组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53589108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there specific number input component in Vuetify?
提问by Tutu Kaeen
I've seen a component in Element UI for managing the amount of items, it's over here:
我在 Element UI 中看到了一个用于管理项目数量的组件，它在这里：
https://element.eleme.io/#/en-US/component/input-number
https://element.eleme.io/#/en-US/component/input-number
I would want to use something like that in Vuetify, but I cannot find a similar component or even similar style example in Material Design. What's the best way to achieve it?
我想在 Vuetify 中使用类似的东西，但我在 Material Design 中找不到类似的组件甚至类似的样式示例。实现它的最佳方法是什么？
回答by yukashima huksay
Yes there is:
就在这里：
<v-text-field
v-model="numberValue"
hide-details
single-line
type="number"
/>
Check out slider component docsfor a working example.
查看滑块组件文档以获取工作示例。
回答by DigitalDrifter
You could just make your own:
你可以自己制作：
new Vue({
el: '#app',
data () {
return {
foo: 0
}
},
methods: {
increment () {
this.foo = parseInt(this.foo,10) + 1
},
decrement () {
this.foo = parseInt(this.foo,10) - 1
}
}
})<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field v-model="foo" type="number" label="Number" append-outer-icon="add" @click:append-outer="increment" prepend-icon="remove" @click:prepend="decrement"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>回答by Brayan Aguilar
in vuetify.js v2.2.22to convert your <v-text-field>in number you need write v-model.number
在vuetify.js v2.2.22中转换<v-text-field>你需要写的数字v-model.number
<v-text-field
v-model.number="foo"
label="Number"
append-outer-icon="add"
@click:append-outer="increment"
prepend-icon="remove"
@click:prepend="decrement">
</v-text-field>
type="number"was delete
type="number"被删除
回答by Jesvin
Vue vuetify Code using :rules="maxRules"
Vue vuetify 代码使用 :rules="maxRules"
<template>
<div>
<v-text-field v-model="text1" :rules="maxRules" label="Credit Amount"></v-text-field>
</div>
</template>
<script>
export default {
data () {
return {
limit:500,
maxRules: [
(v)=> {
if (this.text1 > this.limit) {
return 'Error'
}
}
]
}
}
}
</script>
