<template>
|
<div class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
|
<div class="count-less count-pub" :class="[myValue <= min ? 'light' : 'gray']" @click.stop="less"
|
@longpress="longpressLess" @touchend="handletouchend">-</div>
|
<div class="count-add count-pub" :class="[myValue >= max ? 'light' : 'gray']" @click.stop="add"
|
@longpress="longpressAdd" @touchend="handletouchend">+</div>
|
<input type="number" v-model="myValue" @clcik.stop="clickInput" @focus.stop="onFocus($event)"
|
@blur="onBlue" class="count-input" />
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
myValue: 0,
|
status: false,
|
timer: null
|
}
|
},
|
props: {
|
// 计数器中的值
|
value: {
|
type: Number,
|
default: 0
|
},
|
max: {
|
type: Number,
|
default: 10000000000000
|
},
|
min: {
|
type: Number,
|
default: 1
|
},
|
// 点击当前数据的索引
|
index: {
|
type: Number
|
},
|
delayed: {
|
type: Number,
|
default: 200
|
}
|
},
|
created () {
|
this.myValue = this.value
|
},
|
watch: {
|
value (val) {
|
this.myValue = val
|
}
|
},
|
methods: {
|
onBlue () {
|
this.myValue = Math.floor(Number(this.myValue))
|
if (+this.myValue >= this.max) {
|
this.myValue = this.max || 1
|
this.status = false
|
} else if (+this.myValue <= this.min) {
|
this.myValue = this.min
|
this.status = false
|
} else {
|
this.status = true
|
this.myValue = +this.myValue
|
}
|
if (!isNaN(this.myValue)) {
|
this.$emit('handleCount', {
|
value: this.myValue || 1,
|
index: this.index
|
})
|
} else {
|
this.$emit('handleCount', {
|
value: 0,
|
index: this.index
|
})
|
}
|
},
|
clickInput (e) {
|
e.stopPropagation()
|
return false
|
},
|
onFocus (e) {
|
e.stopPropagation()
|
this.status = true
|
return false
|
},
|
add () {
|
this.addPublick()
|
},
|
addPublick () {
|
if (!this.max) {
|
return
|
}
|
if (this.myValue >= this.max) {
|
this.status = false
|
this.myValue = this.max
|
clearInterval(this.timer)
|
} else {
|
this.status = true
|
this.myValue++
|
}
|
this.$emit('handleCount', {
|
value: this.myValue,
|
index: this.index
|
})
|
},
|
longpressAdd () {
|
this.timer = setInterval(() => {
|
this.addPublick()
|
}, this.delayed)
|
},
|
less () {
|
this.lessPublick()
|
},
|
lessPublick () {
|
if (this.myValue <= this.min) {
|
clearInterval(this.timer)
|
this.status = false
|
this.myValue = this.min
|
} else {
|
this.status = true
|
this.myValue--
|
}
|
this.$emit('handleCount', {
|
value: this.myValue,
|
index: this.index
|
})
|
},
|
longpressLess () {
|
this.timer = setInterval(() => {
|
this.lessPublick()
|
}, this.delayed)
|
},
|
handletouchend () {
|
clearInterval(this.timer)
|
}
|
}
|
}
|
</script>
|
<style lang='scss' scoped>
|
.gray {
|
background: #eef3f9;
|
color: #555555;
|
}
|
.light {
|
background: #f5f7fa;
|
color: #c8c7cc;
|
}
|
.count-box {
|
position: relative;
|
width: 220px;
|
height: 60px;
|
border-radius: 5px;
|
z-index: 1000;
|
transition: all 0.3s;
|
}
|
.count-box-light {
|
border: 1px solid #add4ff;
|
}
|
.count-box-gray {
|
border: 1px solid #e4e4e4;
|
}
|
.count-pub {
|
position: absolute;
|
top: 50%;
|
transform: translate(0, -50%);
|
width: 60px;
|
height: 60px;
|
line-height: 60px;
|
text-align: center;
|
font-size: 32px;
|
}
|
.count-less {
|
left: 0;
|
border-top-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
}
|
.count-add {
|
right: 0;
|
border-top-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
}
|
.count-input {
|
width: 110px;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
padding: 6px 10px;
|
box-sizing: border-box;
|
color: #808080;
|
border:none;
|
font-size: 26px;
|
text-align: center;
|
}
|
</style>
|
