[成功]在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

引用地址:

发表评论:

Powered by emlog 去你妹的备案 sitemap