根据浏览器可视窗口设置高度

根据浏览器可视窗口设置高度

<template>
  <el-card class="box-card" :style="{height:heights+'px'}" >
    <myBread level1="商品管理" level2="商品列表"></myBread>
    <el-alert class="alert" title="成功提示的文案" type="success" center show-icon></el-alert>
    <el-steps
      :active="parseInt(active)"
      simple
      finish-status="success"
      style="margin-top:20px"
      @tab-click="handleClick($index)"
    >
      <el-step title="基本信息" icon="el-icon-edit"></el-step>
      <el-step title="商品参数" icon="el-icon-upload"></el-step>
      <el-step title="商品属性" icon="el-icon-picture"></el-step>
      <el-step title="商品图片" icon="el-icon-picture"></el-step>
      <el-step title="商品内容" icon="el-icon-picture"></el-step>
    </el-steps>
    <!-- <el-form label-position="top" label-width="80px" :model="form" style="height:400px;overflow:auto"> -->
    <!-- <el-tabs v-model="active" tab-position="left" >
      <el-tab-pane label="基本信息" name="0">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
           <el-form-item label="商品价格">
             <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
             <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
             <el-input v-model="form.goods_number"></el-input>
          </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">
         
      </el-tab-pane>
      <el-tab-pane label="商品属性" name="2">
          
      </el-tab-pane>
      <el-tab-pane label="商品图片" name="3">
          
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="4">
          
      </el-tab-pane>
    </el-tabs> -->
     <!-- </el-form> -->
<!-- 
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input v-model="formLabelAlign.region"></el-input>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input v-model="formLabelAlign.type"></el-input>
        </el-form-item>
      </el-form> -->

    
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      heights:'',
      form:{
         goods_name:'',
         goods_cat:'',
         goods_price:'',
         goods_number:'',
         goods_weight:'',
         goods_introduce:'',
         pics:'',
         attrs:'',
      }
    };
  },
  created (){
    this.setBodyContentHeight()
  },
  mounted:function(){
    const self = this
    //onresize 事件会在窗口或框架被调整大小时发生。
   window.onresize = function(){
     self.setBodyContentHeight()
   }
  },
  methods: {
    handleClick(index) {
      //  console.log(index)
    },
    setBodyContentHeight(){
      //设置根据浏览器可视窗口高度
      var height = window.innerHeight || document.documentElement.clientHeight
      this.heights = (height-100)
      console.log(this.heights)
      // return this.heights
    }
  }
};
</script>
<style>
.alert {
  margin-top: 20px;
}
.box-card{
  /* height: 500px; */
  margin-bottom: 20px
}
</style>