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

<template>
	<view>
		<input class="input" :disabled="disabled" :style="{'text-align':align}" :maxlength="maxlength" :type="type" v-model="inputvalue"
		 placeholder-class="pl-class" @input="input($event)" @blur="blur($event)" :placeholder="placeholder" />
	</view>
</template>

<script>
	import bus from '../../utils/bus.js'
	export default {
		name: 'z-input',
		props: {
			value: String | Number,
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: ''
			},
			disabled: Boolean,
			maxlength: String,
			max: {
				type: Number,
				default: 9999999999999
			},
			min: {
				type: Number,
				default: -9999999999999
			},
			step: {
				type: Number,
				default: 1
			},
			decimal: {
				type: Number,
				default: 0
			},
			align: {
				type: String,
				default: 'right'
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		watch: {
			value(newval, oldval) {
				this.inputvalue = this.value;
			}
		},
		data() {
			return {
				inputvalue: ''
			};
		},
		mounted() {
			this.inputvalue = this.value;
		},
		methods: {
			blur(e){
				var num = e.target.value;
				console.log(e)
				if (this.type == 'number'||this.type=='digit') {
					var data = num;
					if (this.decimal != 0) {
						data = data.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
						data = data.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
						data = data.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
						var test = '/^(\\-)*(\\d+)\\.{1}(\\d{0,' + this.decimal + '}).*$/';
						data = data.replace(eval(test), '$1$2.$3'); //只能输入几个小数
					}
					 else {
						data = data.replace(/[^\d]/g, ""); //清除“数字”以外的字符
					}
					if (data.indexOf(".") < 0 && data != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
						data = parseFloat(data);
					}
					console.log('data',data)
					if (data > this.max) {
						console.log('da')
						// var data1 = String(data)
						// data1 = data1.substring(0, data1.length - 1);
						// data = Number(data1);
						// console.log('330',data)
						data=this.max;
					}
					if (data < this.min && data != '') {
						data = this.min;
					}
					  if(Number(data%this.step)>(this.step/2)){
					                data=Number(data) + Number(this.step - data%this.step)
					            }else if(Number(data%this.step)<=(this.step/2)&&Number(data%this.step)>0){
					                data=Number(data) - Number(data%this.step)
					            }
					 num = data;
				}
				 this.$emit('input', num);
				 this.$emit('change',num);
				 this.inputvalue=num;
				setTimeout(()=>{
					this.inputvalue=num;
				},10)
			},
			input(e) {
				
				var num = e.target.value;
				console.log('输入内容',num)
				if (this.type == 'number'||this.type=='digit') {
					var data = num;
					if (this.decimal != 0) {
						data = data.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
						data = data.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
						data = data.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
						var test = '/^(\\-)*(\\d+)\\.{1}(\\d{0,' + this.decimal + '}).*$/';
						data = data.replace(eval(test), '$1$2.$3'); //只能输入几个小数
					} else {
						data = data.replace(/[^\d]/g, ""); //清除“数字”以外的字符
					}
					if (data.indexOf(".") < 0 && data != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
						data = parseFloat(data);
					}
					console.log('data',data)
					if (data > this.max) {
						console.log('da')
						// var data1 = String(data)
						// data1 = data1.substring(0, data1.length - 1);
						// data = Number(data1);
						// console.log('330',data)
						data=this.max;
					}
					if (data < this.min && data != '') {
						data = this.min;
					}
					  if(Number(data%this.step)>(this.step/2)){
					                data=Number(data) + Number(this.step - data%this.step)
					            }else if(Number(data%this.step)<=(this.step/2)&&Number(data%this.step)>0){
					                data=Number(data) - Number(data%this.step)
					            }
					 num = data;
				}
				 this.$emit('input', num);
				 this.$emit('change',num);
				 this.inputvalue=num;
				setTimeout(()=>{
					this.inputvalue=num;
				},10)
					
				// console.log(num) 
				  
			
			}
		}
	}
</script>

<style scoped lang="scss">
	input {}

	.input {
		font-size: 28rpx;
		border: none !important;
		outline: none !important;
		padding: 0 10rpx;
		width: calc(100% - 20rpx) !important;
		background: rgba(0,0,0,0);
	}

	.pl-class {
		color: #999999 !important;
	}
</style>