yurong/components/lxc-count-style/lxc-count-style.vue

<template>
	<view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
		<view class="count-less count-pub relative" :class="[myValue <= min ? 'light' : 'gray']">
			<view class="absolute w100 h100" v-if="!isDisable" @tap.stop="less"  @longpress='longpressLess' @touchend="handletouchend"></view>
			-
		</view>
		<view class="count-add count-pub relative" :class="[myValue >= max ? 'light' : 'gray']">
			<view class="absolute w100 h100" style="left: 0;" v-if="!isDisable&&!plusDisable" @tap.stop="add" @longpress='longpressAdd' @touchend="handletouchend"></view>
			<view class="absolute w100 h100" style="left: 0;" v-else @tap="DisableTap"></view>
			+
		</view>
		<view class="count-input rowsc rowsm">{{myValue}}</view>
	</view>
</template>

<script>
	export default {
		namne:'lxc-count-style',
		data(){
			return{
				myValue: 0,
				status: false,
				timer: null
			}
		},
		props: {
			// 计数器中的值
			value: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 10000
			},
			min: {
				type: Number,
				default: 0
			},
			// 点击当前数据的索引
			index: {
				type: Number
			},
			onIndex: {
				type: Number,
				default: 0
			},
			delayed: {
				type: Number,
				default: 200
			},
			minValue: {//单次加减最低数量
				type: Number,
				default: 1
			},
			isDisable: {//是否禁用
				type: Boolean,
				default: false
			},
			plusDisable: {//是否禁用右边按钮
				type: Boolean,
				default: false
			}
		},
		created() {
			this.myValue = this.value
		},
		watch:{
			value(val) {
				this.myValue = val
			}
		},
		methods: {
			DisableTap() {
				this.$emit('disableTap')
			},
			onBlue() {
				if(+this.myValue >= this.max) {
					this.myValue = this.max
					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', this.myValue, this.index)
				}else {
					this.$emit('handleCount', 0, this.index, this.onIndex)
				}
				
			},
			onFocus() {
				this.status = true
			},
			add() {
				this.addPublick()
			},
			addPublick() {
				if(this.myValue >= this.max) {
					this.status = false
					this.myValue = this.max
					clearInterval(this.timer)
				}else {
					this.status = true
					this.myValue = this.myValue + this.minValue
				}
				this.$emit('handleCount', this.myValue, this.index, 'add')
			},
			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.myValue - this.minValue
				}
				this.$emit('handleCount',this.myValue, this.index, 'less')
			},
			longpressLess() {
				this.timer = setInterval(() => {
					this.lessPublick()
				}, this.delayed)
			},
			handletouchend() {
				clearInterval(this.timer)
			}
		}
	}
</script>
<style>
	
	.count-box{
		position: relative;
		width: 140rpx;
		height: 50rpx;
		border-radius: 5px;
		z-index: 1;
		transition: all .3s;
	}
	.count-box-light{
		/* border: 1px solid #AEAEAE; */
	}
	.count-box-gray{
		/* border: 1px solid #AEAEAE; */
	}
	.count-pub{
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 38rpx;
		height: 36rpx;
		line-height: 100%;
		text-align: center;
		font-size: 22rpx;
		border: 1rpx solid #AEAEAE;
	}
	.count-less{
		left: 0;

	}
	.count-add{
		right: 0;
	
	}
	.count-input{
		width: 70rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		padding: 6rpx 0rpx;
		box-sizing: border-box;
		color: #808080;
		font-size: 31rpx;
		text-align: center;
	}
	.gray{
		color: #809C76;
		border: 2prx solid #809C76 !important;
	}
	.light{
		color: #809C76;
		border: 2prx solid #809C76 !important;
	}
</style>