vue原生获取屏幕高度

技术胖pos实战练习知识点 视频链接

1、全界面

.main{
  float: left;
  width: 100%;
  height: 100%;
  background-color: rgb(240, 249, 255);
  overflow: hidden;
}

2、组件中

<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' class="pos-order" id="order-list">
        我是订单栏
      </el-col>
      <el-col>
        我是产品栏
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'pos',
  mounted: function () {
    //原生获取屏幕高度
    var orderHight = document.body.clientHeight
    console.log(orderHight)
    document.getElementById('order-list').style.height = orderHight + 'px'
  }
}
</script>

<style scoped>
.pos-order{
  background-color: rgb(254, 254, 255);
  border-right: 1px solid #C0CCDA
}
</style>