front-end/ghsPad/src/components/module/allMoreSelectInput.vue

<style lang="scss" scoped>
	.change-input-box{
		display: flex;
		align-items: center;
		.change-input {
			position: relative;
			width: 212upx;
			height: 80upx;
			line-height: 80upx;
			border: 1upx solid #dddddd;
			border-radius: 4upx;
			text-align: center;
			margin-right: 24upx;
			font-size: 40upx;
			input{
				position: absolute;
				width: 100%;
				height: 100%;
				opacity:1;
				&.active{
					opacity:0;
				}
			}
			text{
				&.active{
					background: rgba(10,150,210,0.6);
				}
			}
		}
		.unit{
			width: 50upx;
			text-align: center;
		}
	}
</style>
<template>
	<view class="change-input-box">
		<view class="change-input">
			<input :focus="isFocus" :style="isActive?'caret-color:rgba(0,0,0,0)':'caret-color:rgba(0,0,0,1)'" type="number" @focus="initAllInput" @blur="moveAllInput" v-model="inputVal" @input="changeAllInput" >
			<text :class="isActive?'active':''">{{value?value:''}}</text>
		</view>
		<view class="unit">扎</view>
		<view class="change-input">
			<input :focus="isFocusOne" :style="isActiveOne?'caret-color:rgba(0,0,0,0)':'caret-color:rgba(0,0,0,1)'" type="number" @focus="initAllInputOne" @blur="moveAllInputOne" v-model="inputValOne" @input="changeAllInputOne" >
			<text :class="isActiveOne?'active':''">{{valueOne?valueOne:''}}</text>
		</view>
		<view class="unit">支</view>
	</view>
</template>
<script>
export default {
  name: "allSelectInput",
	props: {
		isActive: '',
		isFocus: '',
		value: '',
		isActiveOne: '',
		isFocusOne: '',
		valueOne: '',
	},
	data() {
		return {
			inputVal:'',
			inputValOne:'',
		};
	},
	onLoad(e){
  		this.title = e.title
	},
	methods: {
		initAllInput() {
			this.$emit('initAllInput')
		},
		moveAllInput(){
			let inputVal = this.inputVal
			this.inputVal = '';
			this.$emit('moveAllInput',inputVal)
		},
		changeAllInput(e){
			if(e.detail.keyCode==8){
				this.$emit('deleteInputVal')
				return;
			}
			this.$emit('deleteInputVal')
		},
		initAllInputOne() {
			this.$emit('initAllInputOne')
		},
		moveAllInputOne(){
			let inputVal = this.inputValOne
			this.inputValOne = '';
			this.$emit('moveAllInputOne',inputVal)
		},
		changeAllInputOne(e){
			if(e.detail.keyCode==8){
				this.$emit('deleteInputValOne')
				return;
			}
			this.$emit('deleteInputValOne')
		}
	}
};
</script>