menu-collapse-transition.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  5. var index = require('../../../hooks/use-namespace/index.js');
  6. var style = require('../../../utils/dom/style.js');
  7. const __default__ = vue.defineComponent({
  8. name: "ElMenuCollapseTransition"
  9. });
  10. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  11. ...__default__,
  12. setup(__props) {
  13. const ns = index.useNamespace("menu");
  14. const listeners = {
  15. onBeforeEnter: (el) => el.style.opacity = "0.2",
  16. onEnter(el, done) {
  17. style.addClass(el, `${ns.namespace.value}-opacity-transition`);
  18. el.style.opacity = "1";
  19. done();
  20. },
  21. onAfterEnter(el) {
  22. style.removeClass(el, `${ns.namespace.value}-opacity-transition`);
  23. el.style.opacity = "";
  24. },
  25. onBeforeLeave(el) {
  26. if (!el.dataset)
  27. el.dataset = {};
  28. if (style.hasClass(el, ns.m("collapse"))) {
  29. style.removeClass(el, ns.m("collapse"));
  30. el.dataset.oldOverflow = el.style.overflow;
  31. el.dataset.scrollWidth = el.clientWidth.toString();
  32. style.addClass(el, ns.m("collapse"));
  33. } else {
  34. style.addClass(el, ns.m("collapse"));
  35. el.dataset.oldOverflow = el.style.overflow;
  36. el.dataset.scrollWidth = el.clientWidth.toString();
  37. style.removeClass(el, ns.m("collapse"));
  38. }
  39. el.style.width = `${el.scrollWidth}px`;
  40. el.style.overflow = "hidden";
  41. },
  42. onLeave(el) {
  43. style.addClass(el, "horizontal-collapse-transition");
  44. el.style.width = `${el.dataset.scrollWidth}px`;
  45. }
  46. };
  47. return (_ctx, _cache) => {
  48. return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, vue.unref(listeners)), {
  49. default: vue.withCtx(() => [
  50. vue.renderSlot(_ctx.$slots, "default")
  51. ]),
  52. _: 3
  53. }, 16);
  54. };
  55. }
  56. });
  57. var ElMenuCollapseTransition = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "menu-collapse-transition.vue"]]);
  58. exports["default"] = ElMenuCollapseTransition;
  59. //# sourceMappingURL=menu-collapse-transition.js.map