front-end/ghsApp/src/components/module/allSelectInput.vue

<style lang="scss" scoped>
	.change-input {
		position: relative;
		width: 164px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background: #ffffff;
		border: 1px solid #dddddd;
		border-radius: 4px;
		font-size: 25px;
		input{
			position: absolute;
			width: 100%;
			height: 100%;
			//opacity:1;
			&.active{
				//opacity:0;
			}
		}
		text{
			&.active{
				background: rgba(10,150,210,0.6);
			}
		}
	}
</style>
<template>
	<view class="change-input" :style="'width:'+width+'rpx !important;height:'+height+'rpx !important;font-size:'+fontSize+'rpx !important'" >
			<input :focus="isFocus" :style="isActive?'caret-color:rgba(0,0,0,0)':'caret-color:rgba(0,0,0,1)'"  :type="inputType?inputType:'number'" @focus="initAllInput" @blur="moveAllInput" v-model="inputVal" @input="changeAllInput" :placeholder="value==''&&inputVal==''?placeholder:''">
			<text :class="isActive?'active':''">{{value?value:''}}</text>
	</view>
</template>
<script>
export default {
  name: "allSelectInput",
	props: {
		width: '',
		height: '',
		fontSize: '',
		isActive: '',
		isFocus: '',
		value: '',
		placeholder: '',
		inputType:'',
	},
	data() {
		return {
			inputVal:'',
		};
	},
	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')
				// else{
					// 	this.$emit('enteringInputVal',e.detail.value)
					// 	console.log(e.detail.value)
					// }

			},
  },
};
</script>