前言
现在是2019年1月初，小程序官方还没有发布cover-input等组件，在map层级之上可操作的组件只有cover-view、cover-image
正文
map组件属于原生组件，层级最高，能在map层级之上可操作的组件只有cover-view、cover-image，现有需求在map组件上层浮现弹框，可输入（input）
在真机上原生input组件嵌在<cover-view />内会被忽略导致
实现思路：
- input用来输入内容，在真机上input组件嵌在<cover-view />内虽然会被忽略，但是点击依旧可以获取焦点；
- 用一个cover-view显示输入的内容，显示内容的cover-view覆盖在input标签上，使视觉上做到cover-input效果；
- 控制input的焦点可以在真机上做到cover-input效果，在input失去焦点后赋值给显示内容的cover-view；
核心代码：
<!-- cover-input伪代码实现 -->
<cover-view class='cover-input' bindtap='tapInput'>
<cover-view class='text'>{{inputInfo}}</cover-view>
<input class='input' value='{{inputModel}}' focus='{{inputFocus}}' bindblur='blurInput'></input>
</cover-view>
<!-- cover-input伪代码实现 -->
.cover-input{
width: 80%;
height: 32px;
line-height: 32px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
position: relative;
left: 50%;
transform: translateX(-50%);
padding-left: 15rpx;
padding-right: 15rpx;
}
.text{
height: 32px;
line-height: 32px;
}
.input{
height: 32px;
line-height: 32px;
/* margin-top为text的高度，保持视觉上一致 */
margin-top: -32px;
}
/**
* 将焦点给到 input（在真机上不能获取input焦点）
*/
tapInput() {
this.setData({
//在真机上将焦点给input
inputFocus:true,
//初始占位清空
inputInfo: ''
});
},
/**
* input 失去焦点后将 input 的输入内容给到cover-view
*/
blurInput(e) {
this.setData({
inputInfo: e.detail.value || '输入'
});
}
效果图：
初始化状态：
真机初始化效果图
输入后：
真机输入后效果图
备注
源码请点：
cover-input源码
系列文章：
「小程序」map组件层级之上实现cover-select
「小程序」map组件层级之上实现cover-process-control
【敬请期待】
