uniapp 实现点击图标按钮使 input 框聚焦

最近使用uniapp做一个评论的功能，遇到一个需求就是点击上面的评论图标，让定位在底部的input框聚焦，使软键盘弹出来，这个需要是常见的功能，下面是具体的实现步骤。

具体要实现的功能就是点击评论按钮，让底部的 input 框聚焦。

 其实实现的思路很简单，只需要在点击评论图标时改变 input 框的 focus 属性就可以了

// 评论的图标 
<u-icon class="comment" name="chat" size="24px" @click="showInput()"></u-icon>
// 固定定位到底部的input框
<u--input class="input" placeholder="快留下精彩的评论吧 ~" :focus="Focus"></u--input>

export default {
    data() {
      return {
         Focus:false
      };
    },
    methods:{
      showInput(){
        this.Focus = true;
      }
    }
  }

以上代码就可以实现上述的功能，但是发现有一个问题就是，这个方法只能触发一次，是因为当点击图标以后，Focus 的值已经变成 true 了，所以当你再次点击图标的时候，就不会出现效果了。解决办法就是获取软键盘的位置，如果软键盘的位置变为 0 的话，就让 Focus 的值变为 false 就解决了，下面是具体的代码。

export default {
    data() {
      return {
         Focus:false
      };
    },
    methods:{
      showInput(){
        this.Focus = true;
        // 获取软键盘的高度
        uni.onKeyboardHeightChange(res => {
          console.log(res.height);
          if(res.height === 0){
              this.Focus = false;
          }
        })
      },
    }
  }

好了，据此就可以点击按钮实现 input 框的聚焦啦，希望对大家有用，再见啦！