Element 表格内的 Popover 弹出框可以任意拖动位置

在Element 表格内的 Popover 弹出框，实现可以任意拖动位置，主要参数 trigger=“manual” 为了实现点击空白处不能隐藏，popper-class 动态添加 calss，ref 定义 ref 控制 Popover 显示隐藏

<el-table-column prop="pageName" label="来源" header-align="center" align="left" show-overflow-tooltip width="160">
    <template slot-scope="scope">
      <div id="popover">
        <el-popover
            close-on-click-modal="false"
            :ref="`popover${scope.row.id}`"
            :popper-class="`popoverClass${scope.row.id}`"
            placement="left"
            width="600"
            trigger="manual">
          <div class="title">
            <div>附件</div>
            <div @click="closeEnclosure(scope)" class="title-icon"><i class="el-icon-close"></i></div>
          </div>
          <iframe :style="{height:clientHeight}" style="width: 100%;border: 0;" :src="`/api/caservice/showPdf/view/${scope.row.id}`"></iframe>
          <span @click="popoverVisible(scope)" slot="reference" class="row-style">{{scope.row.pageName}}</span>
        </el-popover>
      </div>
    </template>
</el-table-column>

使用了 doShow 和 doClose来控制显示和关闭，没有使用手动激活的方式 v-model 来控制，使用 v-model 控制的坑太多了，不建议使用

// 关闭方法
closeEnclosure(scope) {
  document.body.click()
  scope._self.$refs[`popover${scope.row.id}`].doClose()
  scope._self.$refs[`popover${scope.row.id}`].showPopper = false
},
// 拖动方法
popoverVisible(scope) {
  scope._self.$refs[`popover${scope.row.id}`].doShow()
  let popover = document.getElementsByClassName(`popoverClass${scope.row.id}`)[1]
  popover.style.cursor = 'move'
  popover.onmousedown = function (e) {
    // 鼠标按下，计算当前元素距离可视区的距离
    let currentX = e.clientX - popover.offsetLeft
    let currentY = e.clientY - popover.offsetTop
    document.onmousemove = function (event) {
      // 鼠标移动时计算每次移动距离，并且改变拖拽元素定位
      let disX = event.clientX - currentX
      let disY= event.clientY - currentY
      // 给该元素样式中的left和top值赋值
      popover.style.left = disX + 'px'
      popover.style.top = disY + 'px'
    };
    document.onmouseup = e => {
      // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
      document.onmousemove = null
      document.onmouseup = null
    }
  }
},