el-popover弹框自定义位置

 

<el-popover
          ref="popover"
          placement="bottom-start"
          popper-class="popperShow"
          trigger="click"
          @show="iconName = false"
          @hide="popoverHide"
        >
          <i
            :class="{
              'el-icon-setting': iconName,
              'el-icon-s-tools': !iconName,
            }"
            slot="reference"
            @click="handlerMouseenter" // 点击显示弹窗
          ></i>
          <!-- <el-row :gutter="10">
            <el-col :span="8" v-for="colItem in tableHead" :key="colItem.filedName">
              <el-checkbox v-model="colItem.show">{{textEscape(colItem.filedName)}}</el-checkbox>
            </el-col>
          </el-row> -->
          <ul class="loopBox">
            <draggable
              v-model="tableHead"
              chosenClass="chosen"
              ghostClass="ghost"
              handle=".el-icon-rank"
              animation="300"
            >
              <transition-group>
                <li
                  class="loopLis"
                  @mouseup="!colItem.fixed ? insertBox(colItem, index) : ''"
                  v-for="(colItem, index) in tableHead"
                  :key="`${colItem.filedName}${colItem.filedCode}`"
                >
                  <el-checkbox
                    v-model="colItem.show"
                    :true-label="1"
                    :false-label="0"
                    class="lable"
                    >{{ textEscape(colItem.filedName) }}
                  </el-checkbox>
                  <div class="operation">
                    <i class="el-icon-rank" v-if="!colItem.fixed"></i>
                    <div
                      class="fixedBox"
                      @click="fixedSwitch(colItem)
                      "
                    >
                      <svg-icon
                       
                        icon-class="padlock-closed"
                        t="1492500959545"
                        style=""
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        p-id="1691"
                        width="64"
                        height="64"
                        fill="#18a86b"
                        class="redColor"
                      ></svg-icon>
                     
                    </div>
                  </div>
                </li>
              </transition-group>
            </draggable>
          </ul>
        </el-popover>

 handlerMouseenter(event) {
      // 鼠标进入触发元素
      const popover = this.$refs.popover;

      let timer = setTimeout(() => {
        const { clientX } = event;
        const bodyWidth = document.body.clientWidth;
        // 找到气泡元素
        const { popperElm } = popover;
        /**
         * 鼠标位置+气泡弹框宽度是否小于body的宽度
         * 1. 是，设置鼠标位置为气泡弹框横向位移
         * 2. 否，设置body宽度-气泡弹框宽度为气泡弹框横向位移
         */
        let disX =
          clientX + popperElm.offsetWidth < bodyWidth
            ? clientX
            : bodyWidth - popperElm.offsetWidth;

        popover.popperElm.style.right = 15 + "px";//修改位置
        popover.popperElm.style.top = 285 + "px";

        clearTimeout(timer);
      }, 5);
    },