input 组件层级高 漂浮在 fixed 元素之上 解决方案

<!--
	
	问题描述 input 组件层级高 漂浮在 fixed 元素之上, fixed元素设置z-index再高也覆盖不了input 
 	思路
 		
 		input 和 view 元素  设置一样的css样式 设置为绝对定位 input层级比view高
 		
 		input 绑定 focus 事件 当聚焦输入时设置opacity为1 
	 		绑定 blur 事件 当失焦时设置opacity为0  (设置透明度是为了下次点击 时 聚焦事件可以触发)

	 	失焦后opacity 为0 input组件看不到 时 view元素显示出来 不会飘在其他元素上
	
	
 		
 	-->




<template>
	<view class="">
		<view class="" style="height: 100vh;"></view>
		<view class="line">
			<view class="wrap">
				<input
					:style="{ opacity: flag ? 1 : 0 }"
					type="text"
					class="input-style input-dom"
					v-model="str"
					@focus="focusFn"
					@blur="blurFn"
				/>
				<view :style="{ opacity: flag ? 0 : 1 }" class="input-style view-dom">{{ str }}</view>
			</view>
		</view>
		<view
			style="width: 100vw; height: 400rpx; background: green; position: fixed; bottom: 0; left: 0; z-index: 100;"
		></view>

		<view style="height: 400rpx;"></view>
	</view>
</template>

<script>
export default {
	beforeCreate() {},
	data() {
		return {
			str: '',
			flag: false
		};
	},
	methods: {
		focusFn() {
			this.flag = true;
			console.log('focusFn');
		},
		blurFn() {
			this.flag = false;
			console.log('blurFn');
		}
	},
	onLoad() {}
};
</script>

<style scoped lang="scss">
.line {
	background: red;
	width: 80vw;
	height: 300rpx;

	.wrap {
		position: relative;
		width: 300rpx;
		height: 60rpx;

		.input-style {
			position: absolute;
			border: 1px solid green;
			width: 300rpx;
			height: 60rpx;
			background: #cccccc;
			text-align: right;

			&.view-dom {
				z-index: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			&.input-dom {
				z-index: 2;
			}
		}
	}
}
</style>