vue自定义底部居中固定栏

背景：

1.如上图是一个常见的后台管理系统的布局，右下区域为内容区域。 2.内容区域需要随着桌面的宽度变化而变化，位于内容区域最底部有一个保存和取消按钮。 3.不管内容区域宽度怎么变化，底部保存按钮区域需要固定到底部且保存按钮始终居中状态。 4.底部固定栏需要按需才展示在不同的页面

1.子组件：

代码语言：javascript复制

export default {
  name: "BottomBar",
  props: {
    // 按钮文案
    text: {
      require: false,
      type: Object,
      default: () => {
        return {
          cancel: "取消",
          confirm: "保存",
        };
      },
    },
    // 底部区域的默认高度
    defaultHeight: {
      require: false,
      type: Number,
      default: 52,
    },
    // 确定按钮展示
    showConfirm: {
      require: false,
      type: Boolean,
      default: true,
    },
    // 取消按钮展示
    showCancel: {
      require: false,
      type: Boolean,
      default: true,
    },
    // 确定按钮disabled
    confirmDisabled: {
      require: false,
      type: Boolean,
      default: false,
    },
    // 取消按钮disabled
    cancelDisabled: {
      require: false,
      type: Boolean,
      default: false,
    },
    // laodding
    loading: {
      require: false,
      type: Boolean,
      default: false,
    },
    // 保存按钮事件(必传)
    handleConfirm: {
      require: true,
      // type: [Function, Object],
      default: () => {
        return Function;
      },
    },
    // 取消按钮自定义事件
    handleCancel: {
      require: false,
      type: Function,
    },
  },
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    // const ISMICRONEV = window.__POWERED_BY_QIANKUN__
    // const mainAppName = window.__MAIN_APP_NAME__

    // if (ISMICRONEV && ['qiwei', 'yunfan'].includes(mainAppName)) {
    //   container = document.querySelector('.main-container-scroll')
    // } else {
    //   container = document.querySelector('.k_layout_content')
    // }
    this.$nextTick(() => {
      const container = document.querySelector(".k_layout_content");
      container.scrollTop = 0;
      this.scrollTop = container.clientHeight - this.defaultHeight - 10;
      // 监听窗口变化
      window.addEventListener("resize", this.resetResize, true);
      // 监听页面滚动事件
      container.addEventListener("scroll", this.scroll, true);
      console.log(this.scrollTop, "初始化scroll");
    });
  },
  methods: {
    resetResize() {
      const container = document.querySelector(".k_layout_content");
      container.scrollTop = 0;
      this.scrollTop = container.offsetHeight - this.defaultHeight - 10;
      console.log(
        container.offsetHeight,
        container.scrollHeight,
        container.clientHeight,
        container.getBoundingClientRect(),
        "监听窗口变化"
      );
    },
    // 获取页面滚动距离
    scroll(e) {
      // const ISMICRONEV = window.__POWERED_BY_QIANKUN__
      // const mainAppName = window.__MAIN_APP_NAME__
      let className = "k_layout_content";
      // if (ISMICRONEV && ['qiwei', 'yunfan'].includes(mainAppName)) {
      //   className = 'main-container-scroll'
      // } else {
      //   className = 'k_layout_content'
      // }
      // console.log(e, e.target.classList, className, 'GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG')
      // 非目标元素禁止
      if (!e.target.className.includes(className)) {
        // console.log('非目标元素禁止')
        return false;
      }
      let scrollTop = e.target.scrollTop;
      let clientHeight = e.target.clientHeight;
      // let scrollHeight = e.target.scrollHeight
      if ( scrollTop === 0) {
        this.scrollTop = clientHeight - this.defaultHeight - 10;
      } else {
        this.scrollTop = scrollTop   clientHeight - this.defaultHeight - 10;
      }
      // console.log(scrollTop, clientHeight, scrollHeight, '滚动距离')
    },
    goback(handleCancel) {
      if (handleCancel && typeof handleCancel === "function") {
        handleCancel();
      } else {
        this.$router.back({ inTagView: true });
      }
    },
  },

  // 销毁监听事件
  destroyed() {
    this.$nextTick(() => {
      // const container = document.querySelector('.main-container-scroll')
      // const ISMICRONEV = window.__POWERED_BY_QIANKUN__
      // const mainAppName = window.__MAIN_APP_NAME__
      let container = document.querySelector(".k_layout_content");
      container.scrollTop = 0;
      this.scrollTop = 0;
      container.removeEventListener("scroll", this.scroll, true);
      window.removeEventListener("resize", this.resetResize, true);
    });
  },
};



/* 详情页底部保存按钮 */
.app-container-bottom-container {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #f1f1f1;
}

2.父组件：

代码语言：javascript复制

import BottomBar from "&&/components/bottomBar/index.vue";
export default {
  data() {
    return {
      loading: true,
    };
  },
  computed: {
    canEdit() {
      return true;
    },
  },
  methods: {
    // 保存
    onSubmit() {},
  },
};



/* app-container全局内容区域最外层 class样式 */
.app-container {
  padding: 14px 20px 0;
  border-radius: 4px;
  margin: 10px 0 0;
  position: relative;
  box-sizing: border-box;
  position: relative;
  min-height: calc(100vh - 60px - 14px);
  width: auto;
}
/* app-container-detailPage 全局内容区域中详情页页面样式 */
.app-container-detailPage {
  padding-bottom: 52px;
  background-color: #fff;
}

container default require scrolltop 事件

0 人点赞