vue 中 this.$refs.name.offsetHeight 获取不到值（进阶版）

通过vue 中 this.$refs.name.offsetHeight 获取不到值中的需求

qq_36437172

8845人浏览 · 2020-03-01 15:11:21

qq_36437172 · 2020-03-01 15:11:21 发布

通过 vue 中 this.$refs.name.offsetHeight 获取不到值中的需求，【固定高度】的内容如果是通过接口获取，还是使用那种方法是不可行的。由于接口响应时间是长短不一的，也无法设置一个固定的定时器。那我们怎么办呢？

通常我们在请求和响应接口前后都会设置一个 loading 状态，如下：

getInfo() {
  this.showloading = true;
  this.$axios({ method: "get", url: "xxx", data: {} }).then(res => {
    this.showloading = false;
  });
},

当接口响应后，我们将 showloading 设置为 false。把 showloading 的传递给子组件中。子组件通过判断 showloading 的值，再去获取子组件的高度，即所谓的【固定高度】。

 <introduce 
  :entryObj="intrObj" 
  :status="showloading" 
  v-show="!dialogShow" 
  @openDialog="open" 
  @eventGetHeight="getHeight" 
  ref="intr"
></introduce>

这里我要提到 watch ，通过 watch 监听属性的变化，做出逻辑操作，代码如下：

watch: {
  status(newVal, oldVal){
    if(!newVal) {
      this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕 
        this.$emit('eventGetHeight',this.$el.offsetHeight);
      });
    }
  }
},

当接口响应用户端之后，我们在通过 nextTick 获取子组件的高度。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^