vue实现点击任意位置关闭侧滑显示

需求：点击el-table列表展示侧滑框，再次点击列表中不同数据，刷新侧滑框中数据；点击外部任意位置关闭侧滑框

思路：给整个页面加点击事件 click，通过target判断点击的外层元素以及点击的位置，执行关闭侧滑框方法

代码：mounted中监听click事件

  mounted() {
    let doc = $("#app").get(0);
    doc.addEventListener("click", this.bodyCloseMenus);
  },

页面销毁注销事件

  beforeDestroy() {
    let doc = $("#app").get(0);
    doc.removeEventListener("click", this.bodyCloseMenus);
  },

click事件中判断点击位置

    // 点击任意位置关闭侧滑
    bodyCloseMenus(e) {
      // 获取侧滑宽度
      const transWidth = this.$refs.libraryGoodTransitionRef.$refs.tabdetail.offsetWidth ?? 800;
      // 判断是否在侧滑中点击
      if (e.x < this.screen.width - transWidth) {
        // 判断是否点击的el-table表格
        if (!e.target.offsetParent?._prevClass || !e.target.offsetParent?._prevClass.includes("el-table")) {
          // 执行关闭方法
          this.handleClose();
        }
      }
    },