el-popover(vue3 总结)

一  使用

 <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button style="margin-right: 16px">Click to activate</el-button>
      </template>
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="date" />
        <el-table-column width="100" property="name" label="name" />
        <el-table-column width="300" property="address" label="address" />
      </el-table>
    </el-popover>

二 调整上下距离

第一步：定义一个类 

第二步： 设置样式， 在公共样式中设置才起效果

   <el-popover :width="280" trigger="click" popper-class="equity_info" placement="right">
          <template #reference> <div class="rights">权益信息</div> </template>
          <div class="network_content">
            <div class="title">全网线索补全</div>
            <div class="network_content_detail">
              <div class="detail_title"
                >已消耗/总量
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  placement="right"
                  :enterable="false"
                  :hide-after="0"
                >
                  <template #content>
                    已消耗积分：<br />
                    实际消耗积分和当前冻结积分之和<br />
                    (当前冻结积分将根据实际消耗情况进行扣减)
                  </template>
                  <el-icon style="position: relative; top: 2px" size="14px"><Warning /></el-icon>
                </el-tooltip>
              </div>
              <div class="detail_content"> <span style="color: #477fff">1000</span>/5000</div>
            </div>
            <div class="network_content_detail">
              <div class="detail_title">有效期止 </div>
              <div class="detail_content">2024-12-31</div>
            </div>
          </div>
        </el-popover>

.equity_info {
  top: 10px !important;
  .el-popper__arrow {
    top: 15px !important;
  }
}

 三 el-popover嵌套el-tooltip

移入到el-tooltip，后边的el-popover消失了

解决： 不让他移入，只在标签上能看提示，移入消失

  :enterable="false"//鼠标是否可进入到 tooltip 中

但是会抽搐一下

解决：

     :hide-after="0"//延迟关闭，单位毫秒

四el-tooltip 嵌套el-popover 不管用

直接嵌套不生效，可以在中间加个div 就能生效了 

 

     <el-tooltip
          class="box-item"
          effect="dark"
          :content="sellMsg"
          placement="bottom"
          :disabled="!isDisable"
        >
          <div>
            <el-popover
              placement="bottom"
              width="126px"
              trigger="hover"
              popper-style="padding:0; width:124px;"
              v-if="queryParam.status === 2"
              :disabled="isDisable"
            >
              <div class="popList">
                <div class="pop_button" @click="addUser(1)"> 链接邀请 </div>
                <div class="pop_button" @click="addUser(2)"> 手动添加 </div>
              </div>
              <template #reference>
                <el-button
                  type="primary"
                  color="#477FFF"
                  v-if="peopleButtonAuth.includes('controls')"
                  :disabled="isDisable"
                >
                  <iconEpPlus /><span>新建人员</span>
                </el-button>
              </template>
            </el-popover>
          </div>
        </el-tooltip>