我已经在Element UI中看到了一个用于管理项目数量的组件,它在这里:
https://element.eleme.io/#/zh-CN/component/input-number
我想在Vuetify中使用类似的东西,但是在Material Design中找不到相似的组件甚至相似的样式示例。最好的方法是什么?
更新:此答案与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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句