需求
覆盖 textarea 等微信小程序原生组件
实现原理
1.子组件使用 position中的 relative、absolute、fixed
- 子组件和原生组件通过z-index控制覆盖
代码
//子组件
// 子组件 的 wxml
<view class="container">
<input class="bar" placeholder="{{placeholder}}" placeholder-class="in-bar" bindinput="onInput"></input>
</view>
//子组件的wxss
.container {
display: flex;
align-items: center;
margin-left: 20rpx;
position: relative; // 使用了 position
}
父组件
//父组件 引用 子组件
<x-search iconfont="iconfont" icon-sousuo="icon-sousuo" bind:search="onSearch" />
// 原生组件 textarea
<textarea name="test" id="test" cols="30" rows="10" style="border:1px solid red;z-index:0;" bind:tap="test"></textarea>
此时可以通过z-index 大小控制子组件和 原生组件textarea覆盖 （前提：要在子组件设置position 使得组件脱离文档流）
