弹框/抽屉中监听元素的高度变化，实现表单按钮的粘性定位_如果出现滚动条操作按钮粘性定位-CSDN博客

本文链接：https://blog.csdn.net/m0_59102614/article/details/130688618

该文章介绍了一个Vue应用中如何在弹框或抽屉组件中监听内容区域的高度变化，以实现表单按钮的动态定位。当内容高度超过父元素时，按钮变为固定定位，显示在底部；否则，按钮使用相对定位。实现方法涉及到ResizeObserverAPI来检测元素尺寸变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题：

1. 在弹框/抽屉中监听元素高度的变化；

2. 对表单按钮做粘性定位；

a) 若元素高度大于父元素高度，出现滚动条，表单按钮使用固定定位；

b) 若元素高度小于父元素高度，表单按钮使用相对定位；

实现方案：

<template>
  <div>
    <el-button @click="drawer = true">open drawer</el-button>
    <el-drawer title="粘性定位" :visible.sync="drawer" @open="open_drawer" @close="drawer = false">
      <div class="wrapper">
        <div class="content">
          // 内容区
        </div>
        <div class="button btn-basic">
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'VueAppTableValid',

  data() {
    return {
      drawer: false,
      resizeObserver: null,
    };
  },
  methods: {
    open_drawer() {
      let _this = this
      _this.resizeObserver = new ResizeObserver(entries => {
        _this.$nextTick(() => {
          let button = document.querySelector(".button");
          if (entries[0].target.clientHeight > document.getElementsByClassName('wrapper')[0].clientHeight) {
            button.classList.add('buttonFixed');
          } else {
            button.classList.remove('buttonFixed');
          }
        })
      });
      _this.$nextTick(() => {
        _this.resizeObserver.observe(document.getElementsByClassName('content')[0]);
      })
    },
  },
  beforeDestroy() {
    let _this = this
    // 离开页面删除检测器和所有侦听器
    _this.resizeObserver.disconnect();
  }
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: auth;
  text-align: right;
  padding: 0 20px;
}

.btn-basic {
  padding: 12px 0;
}

.button {
  background: #fff;
  position: relative;
  width: 100%;
  right: 0;
}

.content {
  overflow: hidden;
  display: block;
}

.buttonFixed {
  width: 411px;
  position: fixed;
  bottom: 0;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
}
</style>