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>
|