「小程序」map组件层级之上实现cover-input

前言

现在是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
【敬请期待】