Vuetify中有特定的数字输入组件吗？

Question

我在 Element UI 中看到了一个用于管理项目数量的组件，它在这里：

https://element.eleme.io/#/en-US/component/input-number

我想在 Vuetify 中使用类似的东西，但我在 Material Design 中找不到类似的组件，甚至找不到类似的样式示例。实现这一目标的最佳方法是什么？

Answer 1

是的，有：

<v-text-field
  v-model="numberValue"
  hide-details
  single-line
  type="number"
/>

查看文档中的滑块组件以获取工作示例。

Answer 2

更新：此答案适用于 Vuetify 版本 1，yukashima huksay 的答案对于较新版本的 Vuetify 是正确的。

将

type

属性设置为

type="number"

就是正确的方法。

原文：

你可以自己做：

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>

Answer 3

在 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" 已删除

Answer 4

数字输入的一些概念在这里混淆了。

1. 我看不到 type="number" 在 2.2.22 中被删除 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 我也看到它正在渲染至少在 2.3.10 中是正确的

2. 属性 type="number" 的输入字段将根据浏览器、操作系统和区域设置进行不同的处理（例如，我仍然可以在 FF 中输入自由文本，但不能在 Chrome 中输入）。通常，智能手机上的键盘布局会发生变化。

3. v-model.number 纯粹是 Vue 的指令。正如您所看到的，Vue 在内部只是尝试使用 parseFloat 解析输入并在成功时使用它 - 否则它将是文本并在 Vue/JS 中作为字符串处理。 https://v2.vuejs.org/v2/guide/forms.html#number

Answer 5

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>