web-dev-qa-db-ja.com

Vuetifyには特定の番号入力コンポーネントがありますか？

アイテムの量を管理するためのElement UIのコンポーネントを見てきました。ここにあります：

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

Vuetifyでそのようなものを使用したいのですが、Material Designで類似のコンポーネントや類似のスタイル例を見つけることはできません。それを達成する最良の方法は何ですか？

javascriptcssvue.jsmaterial-designvuetify.js
6
Tutu Kaeen

あなたは自分で作ることができます：

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

はいあります：

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

実際の例については、 スライダーコンポーネントのドキュメント をご覧ください。

8
yukashima huksay

：rules = "maxRules"を使用したVue vuetifyコード

<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