我已经在Element UI中看到了一个用于管理项目数量的组件,它在这里:
我想在Vuetify中使用类似的东西,但是我在Material Design中找不到相似的组件,甚至找不到相似的样式示例。最好的方法是什么?
答案 0 :(得分:21)
要转换您的<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” 已删除
答案 1 :(得分:10)
是的,
<v-text-field
v-model="numberValue"
hide-details
single-line
type="number"
/>
查看slider component docs中的示例。
答案 2 :(得分:6)
一些数字输入的概念在这里混在一起。
我看不到在2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22中删除了 type =“ number” ,而且我至少在2.3.10中看到了正确呈现的情况
根据浏览器,操作系统和语言环境设置,对属性类型为“ number”的输入字段的处理方式会有所不同(例如,我仍然可以在FF中输入自由文本,但不能在Chrome中输入自由文本)。通常,智能手机上的键盘布局会更改。
v-model.number纯粹是Vue的指令。如您所见,在内部,Vue只是尝试使用parseFloat解析输入,并在成功时使用它-否则它将是文本,并在Vue / JS中作为字符串处理。 https://vuejs.org/v2/guide/forms.html#number
答案 3 :(得分:5)
您可以自己制作:
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>
答案 4 :(得分:0)
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>