涉及事件 @longpress----长按时触发 ，@touchend----手指从屏幕上离开时触发
1.计数器为文本标签的子组件
<template>
<view class="counter-box">
<view class="counter">
<text class="reduce-add" @click="addReduce(-1)" @longpress="longAddReduce(-1)" @touchend="stopLong">-</text>
<text class="amount">{{count}}{{unit}}</text>
<text class="reduce-add" @click="addReduce(1)" @longpress="longAddReduce(1)" @touchend="stopLong">+</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
setTime:'', // 长按时触发的定时器
}
},
props: ['count','minZero','unit'], // 当前数量，最大数量，单位
methods: {
addReduce(type){
let count = this.count + type
if(count > this.minZero) {
uni.showToast({title:"超出最大购买数量",icon:"none"})
return
}
if(count < 1){
uni.showToast({title:`至少需要购买1${this.unit}`,icon:"none"})
return
}
this.$emit('handleCount',type)
},
// @longpress 长按触发事件
longAddReduce(type){
let count = this.count + type
console.log(count)
if(count > this.minZero || count <1) return
this.setTime = setInterval(()=>{
this.addReduce(type)
},200)
},
// @touchend 手指从屏幕上离开时触发
stopLong(){
clearInterval(this.setTime)
}
}
}
</script>
<style>
.counter-box {
display: inline-block;
border-radius:10rpx;
border:1px solid #dedede;
font-size: 20upx;
color: #7F8389;
vertical-align: top;
}
.counter {
margin-left: 12upx;
font-size: 26upx;
vertical-align: bottom;
display: inline-block;
}
.reduce-add {
font-weight: lighter;
display: inline-block;
color: #CFCFCF;
width: 42upx;
height: 42upx;
line-height: 40upx;
text-align: center;
font-size: 46upx;
vertical-align: middle;
}
.amount {
display: inline-block;
width: 78upx;
height: 42upx;
line-height: 42upx;
text-align: center;
vertical-align: middle;
color: #F37B1D;
background: #FFF9F3;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
</style>
引用
<couter :count='count' :unit='unit' :minZero='minZero' @handleCount='CountEvent'></couter>
count 当前数量
unit 单位
mminZero 最大限制数量
CountEvent(e){ this.count += e },
2.计数器为input标签的子组件
在实现这段代码的时候碰到一个问题
props是父组件向子组件传值的一种方法，在这里我不可避免的将props传递的值直接在子组件中重新进行赋值，故而报此错误
props值，可以通过变量存储props的值watch来监听props的变化对存储的值进行重新赋值<template>
<view class="counter-box">
<view class="counter">
<text class="reduce-add" @click="addReduce(-1)" @longpress="longAddReduce(-1)" @touchend="stopLong">-</text>
<input class="amount" v-model="countNum" type="number" @input="inputAmount">
<text class="reduce-add" @click="addReduce(1)" @longpress="longAddReduce(1)" @touchend="stopLong">+</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
setTime:'', // 长按时触发的定时器
countNum:this.count, // 使用变量存储props中count的初始值，
}
},
watch:{count(){ this.countNum = this.count }}, //为了当count发生变化时监听到新值，通过watch来进行监听赋值
props: ['count','minZero','unit'], // 当前数量，最大限制数量，单位
methods: {
addReduce(type){
let countNum = Number(this.countNum) + type
if(countNum > this.minZero) {
uni.showToast({title:"超出最大购买数量",icon:"none"})
return
}
if(countNum < 1){
uni.showToast({title:`至少需要购买1${this.unit}`,icon:"none"})
return
}
this.$emit('handleCount',type)
},
// @longpress 长按触发事件
longAddReduce(type){
let countNum = Number(this.countNum) + type
if(countNum > this.minZero || countNum <1) return
this.setTime = setInterval(()=>{
this.addReduce(type)
},200)
},
// @touchend 手指从屏幕上离开时触发
stopLong(){
clearInterval(this.setTime)
},
// input输入验证
inputAmount(){
this.$emit('verificationAmount',this.countNum)
}
}
}
</script>
引用
<couter :count='count' :unit='unit' :minZero='minZero'
@handleCount='CountEvent' @verificationAmount='Amount'></couter>
count 当前数量
unit 单位
mminZero 最大限制数量
CountEvent(e){ this.count += e },
Amount(count){
if(count == 0){
this.count= count.replace(/[^1-9]/g,1)
}else if(count > this.minZero) {
this.count = this.minZero
uni.showToast({title:`超出最大购买数量了`,icon:"none"})
}else {
this.count= count.replace(/\D/g,1)
}
},
待续。。。