Ci2Order.vue/App/components/z-number/z-number.vue

<template>
	<view class="flex-n fac">
		<view class="num-content flex-n fac" v-if="nowvalue>0">
		<view @click.stop="todo(0)" class="btn">-</view>
		<!-- <view class="text plr-20">{{nowvalue}}</view> -->
		<z-input class="z-number-input mlr-10" align="center" v-model="nowvalue" type="number"></z-input>
		</view>
		<view class="num-content" v-else></view>
		<view @click.stop="todo(1)" class="btn">+</view>
	</view>
</template>

<script>
	export default{
		props:{
			value:Number|String,
		},
		model:{
			prop:'value',
			event:'input'
		},
		data(){
			return{
				nowvalue:0
			}
		},
		watch:{
			value(newval,oldval){
				this.nowvalue=newval;
				this.$emit('input',this.nowvalue);
			
			},
			nowvalue(newval,oldval){
				this.$emit('input',this.nowvalue);
				this.$emit('change');
			}
		},
		mounted() {
			this.nowvalue=this.value
		},
		methods:{
			todo(state){
				if(state==0){
					if(this.nowvalue>0)
					this.nowvalue--;
				}else{
					this.nowvalue++;
				}
				this.$emit('input',this.nowvalue);
				this.$emit('change');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.num-content{
		width: 120rpx;
	}
	.btn{
		color: #0075FF;
		font-size: 40rpx;
	}
	.text{
		font-size: 24rpx;
		color: #333333;
		white-space: nowrap;
	}
	.z-number-input{
		background: #f3f3f3;
	}
</style>