该篇为前一篇“Element-UI - 解决el-table中图片悬浮被遮挡问题”的优化升级部分，解决当图片位于页面底部时，显示不全问题优化。

        Vue.directive钩子函数已在上一篇中详细介绍，不清楚的朋友可以翻看上一篇， “Element-UI - 解决el-table中图片悬浮被遮挡问题”的地址：Element-UI - 解决el-table中图片悬浮被遮挡问题_el-badge el-table 被遮挡-CSDN博客

一、浏览器窗口

        浏览器窗口的宽和高分别通过window.innerWidth和window.innerHeight获取，如最底部图片，可以通过获取弹框中图片高度，进行对比是否超出window.innerHeight； 如果超出，则减于图片高度，进行底部对齐显示。

二、弹框中图片高度获取

        在上一篇中，在弹框封装类中定义了imgBox属性，用于记录弹框中图片DOM节点对象，所以可以在执行resetPosition(boundingClientRect)函数时，可以通过this.imgBox.height获取弹框中图片的高度。

        控制台中显示弹框中图片高度，如下图：

三、实现图片上移

        通过上述了解后，知道了如何判断图片是否超出底位置，如果超出了，则需要将位置top减掉弹框实际高度（图片高度 + 弹框内填充），进行上移即可。

        修改后的resetPosition函数代码如下：

 /**
   * 重新指定弹框位置
   * @param {Object} boundingClientRect
   */
  resetPosition(boundingClientRect){
    // 弹框实际高度
    const height = this.imgBox.height + this.dialogPadding * 2;
    // 判断图片是否超出底部可见范围
    if( boundingClientRect.top + height >= window.innerHeight){
      // top减于弹框实际高度
       this.sDialog.style.top = (boundingClientRect.top - height) + "px";
    }
    // 未超出
    else{
      this.sDialog.style.top = (boundingClientRect.top - this.dialogPadding) + "px";
    }
    this.sDialog.style.left = (boundingClientRect.width + boundingClientRect.left) + "px";
  }

        此时底部图片则已被修正，可以底部对齐显示了，如下图：

四、完整代码

1.页面代码

import sDialog from './suspendedDialog.js'
export default {
  data(){
    return {
      tableData: [
        {name: "Angular", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},
        {name: "VueJs", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},
        {name: "NuxtJs", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},
        {name: "React", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},
        {name: "Dog", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}
      ]
    }
  },
  directives: {
    // 自定义悬浮v-suspended
    suspended: {
      bind: (el) => {
        // 初始化悬浮框
        sDialog.initialDom();
        // 鼠标经过图片并未移出时执行回调函数
        el.addEventListener('mouseenter', function(e) {
          // 显示悬浮弹框，显示后获取相应的参数信息
          sDialog.toggle(true, () => {
            sDialog.setImgUrl(el.src);                              // 修改新的图片地址
            sDialog.resetPosition(el.getBoundingClientRect());      // 修正弹框位置
          });
        });
        // 鼠标移出图片区域时，隐藏悬浮弹框
        el.addEventListener('mouseleave', () => sDialog.toggle(false));
      }
    }
  },
  // end
}

2.封装类(suspendedDialog.js)

/*
 * 定义弹框类
 */
class SuspendedDialog{
  constructor(){
    this.idName = "suspended-dialog";       // 定义容器ID选择器名称
    this.innerClassName = "inner";          // 内容器类选择器名称
    this.imgClassName = "imgs";             // 图片节点类选择器名称
    this.dialogWidth = 240;                 // 外容器宽度
    this.dialogPadding = 12;                // 外容器内填充

    this.sDialog = document.createElement('div');   // 外层容器
    this.innerBox = document.createElement('div');  // 内容器对象
    this.imgBox = document.createElement('img');    // 图片节点对象
  }
  /**
   * 初始化DOM，并添加到body中
   */
  initialDom(){
    const sDialog = document.getElementById(this.idName);   // 查询节点
    // 如果节点存在，则结束后续操作
    if(sDialog) return;

    // 初始经属性
    this.sDialog.id = this.idName;
    this.innerBox.classList.add(this.innerClassName);
    this.imgBox.classList.add(this.imgClassName);
    // 将DOM追加到对应容器中
    this.innerBox.append(this.imgBox);
    this.sDialog.append(this.innerBox);
    document.body.append(this.sDialog);
    // 追加事件
    this.addEvent();
  }
  /**
   * 修改图片路径
   * @param {Object} _url
   */
  setImgUrl(_url){
    this.imgBox.src = _url;
  }
  /**
   * 添加监听事件
   */
  addEvent(){
    this.sDialog.addEventListener('mouseenter', e => this.toggle(true));    // 鼠标移入悬浮框区域时保持显示
    this.sDialog.addEventListener('mouseleave', e => this.toggle(false));   // 鼠标移出悬浮框区域时隐藏
  }
  /**
   * 显示与隐藏
   * @param {Object} flag
   * @param {Object} callback  回调函数
   */
  toggle(flag, callback = () => {}){
    if(flag && 'block'!=this.sDialog.style.display){
      this.sDialog.style.display = 'block';
      callback();
    } else if(!flag && 'none'!=this.sDialog.style.display){
      this.sDialog.style.display = 'none';
      callback();
    }
  }
  /**
   * 重新指定弹框位置
   * @param {Object} boundingClientRect
   */
  resetPosition(boundingClientRect){
    // 弹框实际高度
    const height = this.imgBox.height + this.dialogPadding * 2;
    // 判断图片是否超出底部可见范围
    if(boundingClientRect.top + height >= window.innerHeight){
      // top减于弹框实际高度
       this.sDialog.style.top = (boundingClientRect.top - height) + "px";
    }
    // 未超出
    else{
      this.sDialog.style.top = (boundingClientRect.top - this.dialogPadding) + "px";
    }
    this.sDialog.style.left = (boundingClientRect.width + boundingClientRect.left) + "px";
  }
}
export default new SuspendedDialog();

        另外，图片除了底部超出可见范围，也会出现左侧或右侧超出可见范围，则可以通过window.innerWidth进行判断处理，计算方式差不多，这里就不再阐述。