vue 动态改变标签高度 监听标签高度

export default {

    data(){

      return {

// 默认屏幕高度属性

        fullHeight: 0,

        heightStyle:{

          height:''

        }

      }

    },

      watch: {

        //动态监听

        fullHeight(val){

          if(val !== undefined){

            this.beforeMount(val);

          }

        }

    },

    mounted() {

      // 初始加载高度

        this.fullHeight = `${document.documentElement.clientHeight}`;//默认值

        this.heightStyle.height = this.fullHeight + 'px';

        const that = this;

        window.onresize = () =>{

          //动态赋值

          that.fullHeight =  window.innerHeight;

          that.heightStyle.height = (that.fullHeight - 215) + 'px'

        }

         //防止空值出现

        if(that.fullHeight){

          this.heightStyle.height = that.fullHeight - 215 + 'px';

        }else{

          this.heightStyle.height = 400 + 'px'

        }

      },

methods: {

        //监听调用的函数

        beforeMount(height) {

          console.log(height,"改变后");

        },

      },

  }

你可能感兴趣的:(vue 动态改变标签高度 监听标签高度)