详情页底部fixed去除抖动

背景

当我们有类似这样的需求，详情页底部需要放很多个操作按钮（如关闭、审批通过、驳回等），然后主内容区域可以滚动。
那么我们通常会把底部这一栏内容用fixed固定在底部，如下示例：

但是这样有一个问题，当从列表页点击详情页时，你会发现底部fixed固定的部分会抖动一下才显示，体验很不好

优化

我们自定义一个组件，用于优化来去除抖动，代码如下：
假设新建文件components/Inbody/index.vue

代码

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>

// 页面布局有fixed时，有动画效果包裹时，fixed布局会出现抖动，该组件防止抖动
export default{
  mounted(){
    const node = this.$mount().$el
    document.body.appendChild(node)
  },
  destroyed(){
    const node = this.$mount().$el
    node.remove();
  },
  // 有缓存时用这个
  activated() {
    const node = this.$mount().$el
    document.body.appendChild(node)
  },
  deactivated() {
    const node = this.$mount().$el
    node.remove();
  }
}
</script>

用法

只需要用这个组件，把fixed固定的内容包裹起来即可

<template>
  <in-body>
   <div class="fix-bottom">
     <el-button @click="handleEdit" v-if="notAllowEdit">编辑</el-button>
     <el-button @click="handleCancel" v-if="!notAllowEdit">取消</el-button>
     <el-button @click="handleComfirm" v-if="!notAllowEdit">保存</el-button>
   </div>
 </in-body>
</template>

import InBody from "@/components/InBody/index.vue";
export default {
  components: {
    InBody
  },
}