本文详细介绍了如何使用Vue实现一个数字输入框组件，该组件支持输入数字（包含小数）、设置初始值、最大值和最小值。通过Vue CLI服务进行快速开发，组件包含模板、JS、watch和methods部分，以及Less样式。组件限制输入值在最小值和最大值之间，并提供增减按钮。文章最后总结了实现过程，并提供了完整示例代码。
数字输入框组件
实现功能：只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。
为了方便，这里选用Vue的 cli-service
实现快速原型开发
首先template部分代码
这部分没有什么特别说明的，分别传入 value、max、min 作为子组件的原始值最大值和最小值。在子组件中用 props 接收，独立组件，对每个传入的prop进行类型验证
主要JS部分代码
import Vue from 'vue'
Vue.component('input-number',{
props: {
value: {
type: Number,
default: 0
},
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
}
},
data() {
return {
currentValue: this.value
}
},
render(cr) {
let _this = this
...
}
})
export default {
data()
最低0.47元/天 解锁文章
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
