css 弹出层-手写 Popover 弹出框

最近的一个项目需要一个类似element但具有多种功能的弹出框，但是element给出的弹出框只支持点击或者键盘浮动，而项目需要右键或者嵌套操作。 于是我自己写了一个，结果如下图。 我就按照我个人完成的整体思路来介绍一下。

第一步：首先找到点击的dom，然后通过估计dom的宽高来定位弹窗。 点击后如何获取dom的规格和定位？这是我写的

审批新增参军11

  

  



export default {
  data() {
    xAxis: 0,
    yAxis: 0
    dialogVisiable: false
  }
  methods: {
    showDialog(event) {
      let domLoc = event.toElement.getBoundingClientRect()
      this.xAxis = domLoc.x + domLoc.width
      this.yAxis = domLoc.y + domLoc.height
      this.dialogVisiable = true;
    },
  }
}


.dialog {
    background: #fff;
    position: absolute;
    width: 80px;
    // height: 100px;
    z-index: 100;
    border: 1px solid #EBEEF5;
    box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1), -1px -1px 2px 0px rgba(192, 196, 204, 1);
    &-arrow {
      width: 0;
      height: 0;
      border: 14px solid transparent;
      border-right-color: rgba(192, 196, 204, .7);
      position: relative;
      top: 25px;
      left: -29px;
    }
    &-insideArrow {
      width: 0;
      height: 0;
      border: 12px solid transparent;
      border-right-color: #fff;
      position: relative;
      top: -1px;
      left: -24px;
    }
  }

点击通过$event参数后，它的属性toElement就是dom，可以通过getBoundingClientRect()方法获取它的各种规范信息

获取信息后，可以设置点击后弹窗的位置信息。 弹窗的样式如下，弹窗的箭头怎么写，有很多文章可以学习。 我只写别人的，没有总结我博客的原理，我只放一个链接供参考。 这个人写得很好。

第二步：如何让弹窗随着点击的点滚动？ 由于技术有限，我并没有像element源码那样写出类似popperJs的vue-popper。 当然，我打算在深入研究一段时间后写一篇专门的博客来分享。

这里我的看法是css 弹出层，通过添加风暴监听器，监听滚动风暴后就可以获得scrollTop。 这里我引用了一个realYAxis变量。 因为之前得到的yAxis需要记录下来并正常使用。

审批新增参军11

  

  


data() {
  return {
    realYAxis: 0
  }
}
mounted () {
  window.addEventListener('scroll', this.handleScroll, true)
},
destroyed() {
  window.removeEventListener("scroll", this.handleScroll, true);
},
methods: {
  handleScroll() {
    this.realYAxis = this.yAxis - this.$refs.tableMain.scrollTop + this.initScrollTop
  }
}

第三步：如何确认点击弹窗外部会关闭弹窗？ 通过了解，我知道有一种方法可以判断点击的点是否在dom contains中。 所以结合我们的三个步骤，最终的代码如下：

  

    

      
审批新增参军11
    
      

      

      

    
  


export default {
  data() {
    dialogVisiable: false,
    xAxis: 0, // 弹窗的横坐标
    yAxis: 0, // 点击时的纵坐标
    initScrollTop: 0, // 父组件tableMain纵向滚动的距离
    realYAxis: 0 //弹窗的纵坐标
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    // 显示弹出框
    showDialog(event) {
      let domLoc = event.toElement.getBoundingClientRect()
      console.log(domLoc);
      this.xAxis = domLoc.x + domLoc.width
      this.yAxis = domLoc.y - domLoc.height
      this.initScrollTop = this.$refs.tableMain.scrollTop
      this.realYAxis = this.yAxis
      this.dialogVisiable = true;
    },
    handleScroll() {
      this.realYAxis = this.yAxis - this.$refs.tableMain.scrollTop + this.initScrollTop
    },
    closeDialog(event) {
      if (event.toElement.className !== "cell-item" &&     
        !this.$refs.dialog.contains(event.toElement)) {
        // 获取点击到的dom的className
        this.dialogVisiable = false;
      }
    },
  }
}

这个东西我花了7天css 弹出层，如果对你有用记得点赞哦。