1、监听页面的高度变化动态隐藏和显示底部的按钮

实现步骤：

  1. HTML：
  2.     <div class="fix-btn">
  3.         <el-button  v-show="isShow">底部固定按钮</el-button>
  4.      </div>
  5. CSS:
  6.     .fix-btn{
  7.       position:fixed;
  8.     bottom;0;
  9.     left:0;
  10.   }
  12. JS：
  13.   data(){
  14.     return{
  15.       //屏幕高度
  16.       screenHeight:document.documentElement.clientHeight,
  17.       //用于储存原始高度
  18.       originHeight:document.documentElement.clientHeight,
  19.       /隐藏显示
  20.       isShow:false
  21.     }
  22.   }
  24.     // 监听窗口大小值的变化
  25.     mounted(){
  26.       window.onresize = ()=>{
  27.         this.screenHeight = document.documentElement.clientHeight
  28.     }
  29.   },
  31.   // 监听数据变化
  32.   watch:{
  33.     screenHeight(val){
  34.       // 华为手机会出现问题，所以要+10
  35.       this.isShow = originHeight > val + 10 ?false:true
  36.     }
  37.   }