小程序 底部fixed输入框

 keyboardheightchange 主要用这个事件,实施获取键盘的高度和过渡的时间,其他的事件去获取,都没有这个好

输入框每次都需要销毁再创建出来,这样才能聚焦

<template>
	<view class="module" @click="modelHandel" v-show="showModel">
		<view @click.stop v-if="showModel" class="inputBox" :style="{ bottom: keyboard + 'px', transition: `all ${duration}` }">
			<input type="text" placeholder="请输入" :adjust-position="false" @input="changvalue" :value="value" :focus="true" @keyboardheightchange="keyboardchange" />
		</view>
	</view>
</template>
<script>
export default {
	props: {
		value: '',
		showModel: false,
	},
	data() {
		return {
			keyboard: 0,
			duration: 0,
		}
	},
	methods: {
		modelHandel() {
			this.$emit('update:showModel', false)
		},
		changvalue(e) {
			this.$emit('input', e.detail.value)
		},
		keyboardchange(event) {
			this.keyboard = event.detail.height
			this.duration = event.detail.duration
		},
	},
}
</script>

<style scoped lang="scss">
.module {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: rgba($color: #000000, $alpha: 0.5);
	z-index: 99999;
	.inputBox {
		position: absolute;
		bottom: 0;
		background: #fff;
		right: 0;
		width: 100%;
		height: 100rpx;
	}
}
</style>