element UI 表格el-popover的一个坑

需求： element UI 表格el-popover的一个坑
点击详情的小箭头可以看到详情列表
然鹅 element的组件是这样的

可以通过点击事件来打开气泡，但是需求上有个箭头，不能忍
准备监听popover的display状态来改变箭头状态的
但是发现
这个气泡在app外面，根本监！听！不！到！
只能用document的点击事件来改变箭头状态

我给箭头加了一个class 通过class改变上下方向
然后在mounted里通过document事件改变
但是问题是总是出bug，不是点了没动，就是点了大家都在动
后来经过不断反思嗯~
上代码
html：

 <el-table-column align="center" prop="date" width="260" label="到访时间">
            <template slot-scope="scope">
              <div class="form-date">
                <p>{{scope.row.date.value}}</p>

                <el-popover trigger="click" placement="top">
                  <ul>
                    <li>testtesttesttesttest</li>
                  </ul>
                  <div slot="reference" @click="showDetail(scope.row.date)">
                    <span class="date-detail">详情</span>
                    <span :class="{'el-icon-arrow-up':true, 'detail-arrow': true}"></span>
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>

 window.document.onclick = function(e) {
      var showDetail = document.getElementsByClassName("showDetail");
      var up = document.getElementsByClassName("detail-arrow");
      var detail = document.getElementsByClassName("detail");
      var target;
      // 如果是详情按钮 那么把目标元素转交给箭头
      if (e.target.className.indexOf("date-detail") > -1) {
        target = e.target.nextElementSibling;
      } else {
        target = e.target;
      }

      for (let i = 0; i < up.length; i++) {
        // 如果有箭头向上，并且点击目标也向上那么取消显示，终止循环
        if (
          up[i].className.indexOf("showDetail") > -1 &&
          target.className.indexOf("showDetail") > -1
        ) {
          up[i].classList.remove("showDetail");
          //  up[i].classList.remove("showDetail");
          break;
        } else if (
          showDetail.length &&
          up[i].className.indexOf("detail-arrow") > -1
        ) {
          // 如果有向上的箭头并且点击的不是箭头那么将箭头还原
          up[i].classList.remove("showDetail");
        } else if (
          // 如果点击的是箭头并且没有向上，那么将箭头向上,中断循环
          target.className.indexOf("detail-arrow") > -1 &&
          target.className.indexOf("showDetail") === -1 &&
          up[i].className.indexOf("showDetail") === -1
        ) {
          target.className += "  showDetail";
          break;
        }
      }
    };

终于搞好了
element UI 表格el-popover的一个坑
是这个效果，判断特别特别复杂，搞了几个小时。。
我要向element 如果有需要直接把东西拿去用
（ps：上班时间偷偷写博客，说的不详细，见谅）

element UI 表格el-popover的一个坑

相关推荐