美文网首页
vue移动端fixed定位按钮在底部,键盘弹起,不让底部按钮顶上

vue移动端fixed定位按钮在底部,键盘弹起,不让底部按钮顶上

作者: 布卡卡的晴空 | 来源:发表于2020-05-12 10:45 被阅读0次

检测浏览器的resize事件,当按钮高度过小时就可以判定为出现这种情况,这时把按钮直接隐藏掉之类的
一、html部分

    <div v-show="isOriginHei" class="newGroupRecord-bottom">
      <span @click="submitSave('1')">提交</span>
      <span @click="submitSave('0')">保存</span>
    </div>

二、js部分

data(){
return {
     isOriginHei: true,
      screenHeight:
        window.innnerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      originHeight:
        window.innnerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
}
}

  mounted() {
    let self = this;
    window.onresize = function() {
      return (function() {
        self.screenHeight =
          window.innnerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
      })();
    };
  },
  watch: {
    screenHeight(val) {
      if (this.originHeight != val) {
        this.isOriginHei = false;
      } else {
        this.isOriginHei = true;
      }
    }
  }

相关文章

网友评论

      本文标题:vue移动端fixed定位按钮在底部,键盘弹起,不让底部按钮顶上

      本文链接:https://www.haomeiwen.com/subject/bpognhtx.html