Vuetify에 특정 숫자 입력 구성 요소가 있는가?

Vuetify에 특정 숫자 입력 구성 요소가 있는가?

항목 양을 관리하는 요소 UI의 구성요소를 본 적이 있으며, 여기서 확인하십시오.

https://element.eleme.io/#/en-US/구성 요소/입력 번호

나는 뷔에티파이에서 그런 것을 사용하고 싶지만 재료 디자인에서 비슷한 구성 요소나 비슷한 스타일의 예를 찾을 수 없다.그것을 이루기 위한 가장 좋은 방법은 무엇인가?

예:

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

슬라이더 구성 요소 문서에서 작업 예를 확인하십시오.

업데이트: 이 답은 Vuetify 버전 1과 관련이 있으며, Yukama 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>

invuetify.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="숫자"가 삭제됨

숫자 입력에 대한 일부 개념은 여기서 혼동된다.

1. 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22에서 삭제된 형식="숫자"를 볼 수 없으며 적어도 2.3.10에서 올바르게 렌더링된 형식도 볼 수 있다.

2. 속성 타입="숫자"를 가진 입력 필드는 브라우저, OS, 로케일 설정에 따라 다르게 처리된다(예: Chrome이 아닌 FF로 자유 텍스트를 입력할 수 있다).일반적으로 스마트폰에서 자판 배열이 변경된다.

3. v-model.number는 순수하게 Vue의 지시사항이다.보시다시피 내부적으로 Vue는 단순히 parseFloat로 입력을 구문 분석하여 성공에 활용하지만 그렇지 않으면 텍스트가 되어 Vue/JS에서 문자열로 처리될 것이다.https://vuejs.org/v2/guide/forms.html#number

:rules="maxRules"를 사용하여 Vuevuetify 코드

<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>

참조URL: https://stackoverflow.com/questions/53589108/is-there-specific-number-input-component-in-vuetify