手写一个Popover 弹出框

        最近的项目中需要一个类似于element但又有多种定制化功能的弹出框，但element给的弹出框只支持点击或者鼠标悬浮唤醒，而项目中需要的是右击，或者嵌套操作，所以就自己写了一个，成果如下图。我按照个人完成的整个思路去介绍。

步骤一：首先找到点击的这个dom,然后通过计算这个dom的宽高等属性将这个弹窗定位，如何点击后获取这个dom的尺寸和定位呢？这里我是这样写的

<div @click="showDialog($event)">审批新增参军11</div>
<div class="dialog" ref="dialog" v-show="dialogVisiable" :style="{left: xAxis + 'px', top: yAxis + 'px'}">
  <div class="dialog-arrow"></div>
  <div class="dialog-insideArrow"></div>
</div>
<script>
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;
    },
  }
}
</script>
<style>
.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;
    }
  }
</style>

点击后通过这个$event参数，其属性toElement就是 这个dom, 通过getBoundingClientRect()方法就可以获取到其各种尺寸信息

获取到信息后，就可以定下点击后这个弹窗的位置信息，这个弹窗的样式如下，这个弹窗的箭头是怎么写的，也有很多文章可以去了解，本着我只写别人没有总结的博客的原则，我只放一个参看的连接https://www.cnblogs.com/dengyao-blogs/p/11672071.html。这个小伙伴写的非常详细。

步骤二：如何让弹窗跟着被点击的点滚动而滚动？由于技术有限，我没有像element源码一样写一个类似于popperJs的vue-popper。当然我准备过段时间去深入研究后再写一篇专门的博客分享。

这里我的想法是，通过添加一个事件监听器，监听滚动事件后获取scrollTop。这里我又引用了一个realYAxis变量。因为之前获取到的yAxis需要记录下来才能正常的去使用。

<div @click="showDialog($event)">审批新增参军11</div>
<div class="dialog" ref="dialog" v-show="dialogVisiable" :style="{left: xAxis + 'px', top: realYAxis + 'px'}">
  <div class="dialog-arrow"></div>
  <div class="dialog-insideArrow"></div>
</div>

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。所以综合我们的三个步骤，最终的代码如下：

<template>
  <div @click="closeDialog($event)">
    <div ref="tableMain>
      <div class="cell-item" @click="showDialog($event)">审批新增参军11</div>
    </div>
      <div class="dialog" ref="dialog" v-show="dialogVisiable" :style="{left: xAxis + 'px', top: realYAxis + 'px'}">
      <div class="dialog-arrow"></div>
      <div class="dialog-insideArrow"></div>
    </div>
  </div>
</template>
<script>
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;
      }
    },
  }
}
</script>

 

这个玩意花了我两天时间，如果对你有用的话记得点个赞。