86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<template>
|
||
<div class="fxcol">
|
||
<input
|
||
class="filter-input i-border"
|
||
:disabled="disabled"
|
||
:type="type"
|
||
ref="input"
|
||
:value="numberValue"
|
||
:placeholder="placeholder"
|
||
oninput="value=value.replace(/[^\d.]/g,'')"
|
||
@input="handleChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'limitInput',
|
||
props: {
|
||
disabled: Boolean,
|
||
type: String,
|
||
placeholder: String,
|
||
value: '', // 传过来的值
|
||
max: Number,
|
||
min: Number,
|
||
defaultValue: '' // 默认值
|
||
},
|
||
data () {
|
||
return {
|
||
numberValue: this.value
|
||
}
|
||
},
|
||
watch: {
|
||
value (val) { // 监听传来的value值，并传递给新定义的值
|
||
// debugger
|
||
this.numberValue = Number(val)
|
||
},
|
||
max (val) { // 因为最大值是根据上个值输入而变化的，所以要监听相应变化
|
||
this.max = val
|
||
},
|
||
min (val) { // 因为最小值是根据上个值输入而变化的，所以要监听相应变化
|
||
this.min = val
|
||
},
|
||
numberValue (val) { // emit input事件,可令父组件进行v-model绑定
|
||
this.$emit('input', val)
|
||
},
|
||
disabled (val) {
|
||
this.disabled = val
|
||
},
|
||
defaultValue (val) { // 要根据上面的值变化而相应变化，所以要监听
|
||
this.numberValue = val
|
||
}
|
||
},
|
||
methods: {
|
||
handleChange (event) {
|
||
let val = event.target.value.trim()
|
||
if (val < 0 || isNaN(val)) {
|
||
this.numberValue = 0
|
||
return
|
||
}
|
||
if (val) {
|
||
val = Number(val)
|
||
this.numberValue = val
|
||
if (val > Number(this.max)) this.numberValue = this.max
|
||
if (val < Number(this.min)) this.numberValue = this.min
|
||
} else {
|
||
this.numberValue = 0
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
if (this.defaultValue) {
|
||
this.numberValue = this.defaultValue
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
// input
|
||
// width 100%
|
||
.i-border
|
||
border 1px solid #a1a1a1
|
||
border-radius 3px
|
||
text-align center
|
||
</style>
|