V君的博客

[成功]在element-ui表单选择器组件实现鼠标移入自动展开

作者：V君 发布于：2017-12-20 16:22 Wednesday 分类：挖坑经验

前些天一直在做服务器后端, 最近才开始实现界面, 

自从被猫同事推荐了基于 VUE 的 element-ui 之后发现: 原来这样开发前端也挺舒服的.

只是 element-ui 的实现细节仍然不到位, 比如选择器或级联下拉不支持鼠标移入就自动展开.

官方 hub 上的 issues(4676,4682) 貌似也没人理,于是自己补了一下刀.

像这样:

给需要自动展开的 el-select 和 el-cascader 加上 autoExpand 属性,
在DOM创建之后(比如对话框弹出事件)调用即可.
可以适当修改自动展开的延迟时间让操作更友好.

function patchElemenUiDropdown() {
 setTimeout(() => {
  var delayEnter = 300;
  var delayOut = 200;
  var namespace = "28ae9795d1214b049aa90229e37b9c7f";
  function isBind(element, eventName) {
      var bindedEvents = $._data(element, "events");
      return bindedEvents && bindedEvents[eventName]
          && Enumerable.From(bindedEvents[eventName])
              .Any(p => p.namespace === namespace);
  }
  $('span.el-cascader[autoExpand]').each((idx, elmx) => {
      if (isBind(elmx, 'mouseover')) return;
      (function (elm) {
          var jqdom, jqdd, tmrIn, tmrOut;
          var prepOut = () => {
              clearTimeout(tmrOut);
              tmrOut = setTimeout(() => {
                  if (jqdom.hasClass("is-opened")) {
                      jqdom.click();
                      jqdd.off("mouseleave." + namespace);
                  }
              }, delayOut);
          };
          $(elm).on("mouseenter." + namespace, mee => {
              clearTimeout(tmrOut);
              $(elm).on("mouseleave." + namespace + ".in", ()
                  => {
                  clearTimeout(tmrIn);
                  $(elm).off("mouseleave." + namespace + ".in");
              });
              $(elm).on("click." + namespace + ".in", () => {
                  clearTimeout(tmrIn);
                  $(elm).off("click." + namespace + ".in");
              });
              tmrIn = setTimeout(() => {
                  jqdom = $(mee.delegateTarget);
                  if (!jqdom.hasClass("is-opened")) {
                      jqdom.click();
                      setTimeout(() => {
                        var jr = $("div.el-cascader-menus");
                        var dd = jr[jr.length - 1];
                        if (isBind(dd, "mouseout")) return;
                        jqdd = $(dd);
                        jqdd.on("mouseleave." + namespace, prepOut);
                        jqdd.on("mouseenter." + namespace, () =>
                             clearTimeout(tmrOut));
                      }, 0);
                  }
                  if (!isBind(elm, 'mouseout'))
                      jqdom.on("mouseleave." + namespace, prepOut);
              }, delayEnter);
          });
      })(elmx);
  });
  $('div.el-select[autoExpand]').each((idx, elmx) => {
      if (isBind(elmx, 'mouseover')) return;
      (function (elm) {
        var jqdom, jqclk, jqdd, tmrIn, tmrOut;
        var prepOut = () => {
          clearTimeout(tmrOut);
          tmrOut = setTimeout(() => {
            if (jqdom.find('div.el-input').hasClass("is-focus")) {
                jqclk.click();
                jqdd.off("mouseleave." + namespace);
            }
          }, delayOut);
        };
        $(elm).on("mouseenter." + namespace, mee => {
          clearTimeout(tmrOut);
          $(elm).on("mouseleave." + namespace + ".in", () => {
              clearTimeout(tmrIn);
              $(elm).off("mouseleave." + namespace + ".in");
          });
          $(elm).on("click." + namespace + ".in", () => {
              clearTimeout(tmrIn);
              $(elm).off("click." + namespace + ".in");
          });
          tmrIn = setTimeout(() => {
            jqdom = $(mee.delegateTarget);
            jqclk = $(jqdom.find('div.el-select__tags')[0]);
            if (!jqdom.find('div.el-input').hasClass("is-focus")) {
                jqclk.click();
                setTimeout(() => {
                    var jr = $("div.el-select-dropdown");
                    var dd = jr[jr.length - 1];
                    if (isBind(dd, "mouseout")) return;
                    jqdd = $(dd);
                    jqdd.on("mouseleave." + namespace, prepOut);
                    jqdd.on("mouseenter." + namespace,
                        () => clearTimeout(tmrOut));
                }, 0);
            }
            if (!isBind(elm, 'mouseout'))
                jqdom.on("mouseleave." + namespace, prepOut);
          }, delayEnter);
        });
      })(elmx);
  });
 }, 0); // End setTimeOut}

标签: javascript Web技术 VUE