value数字 vue_Vue数字输入框

数字输入框组件

实现功能：只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。

为了方便，这里选用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() {

retur