web-dev-qa-db-fra.com

Y a-t-il un composant d'entrée de numéro spécifique dans Vuetify?

J'ai vu un composant dans Element UI pour gérer la quantité d'articles, c'est ici:

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

Je voudrais utiliser quelque chose comme ça dans Vuetify, mais je ne trouve pas un composant similaire ou même un exemple de style similaire dans Material Design. Quelle est la meilleure façon d'y parvenir?

javascriptcssvue.jsmaterial-designvuetify.js
6
Tutu Kaeen

Vous pouvez simplement créer le vôtre:

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

Oui il y a:

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

Consultez documents sur les composants du curseur pour un exemple de travail.

8
yukashima huksay

Vue vuetify Code utilisant: 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>
0
Jesvin