计数器组件

涉及事件 @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)
	}
}, 

待续。。。