@cqmcui/cqmcui/dist/packages/_es/Menu.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { ref, computed, onMounted, onUnmounted, reactive, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, renderSlot, createBlock } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { u as useRect } from "./index-29892cda.js";
import { ArrowUp2, ArrowDown2 } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("menu");
const _sfc_main = create({
  components: {
    ArrowUp2,
    ArrowDown2
  },
  props: {
    activeColor: {
      type: String,
      default: ""
    },
    overlay: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 0
    },
    titleIcon: String,
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    direction: {
      type: String,
      default: "down"
    },
    scrollFixed: {
      type: [Boolean, String, Number],
      default: false
    },
    titleClass: [String]
  },
  setup(props, { emit, slots }) {
    const barRef = ref();
    const offset = ref(0);
    const isScrollFixed = ref(false);
    const useChildren = () => {
      const publicChildren = reactive([]);
      const internalChildren = reactive([]);
      const linkChildren2 = (value) => {
        const link = (child) => {
          if (child.proxy) {
            internalChildren.push(child);
            publicChildren.push(child.proxy);
          }
        };
        const removeLink = (child) => {
          if (child.proxy) {
            let internalIndex = internalChildren.indexOf(child);
            if (internalIndex > -1) {
              internalChildren.splice(internalIndex, 1);
            }
            let publicIndex = publicChildren.indexOf(child.proxy);
            if (internalIndex > -1) {
              publicChildren.splice(publicIndex, 1);
            }
          }
        };
        provide(
          "menuParent",
          Object.assign(
            {
              removeLink,
              link,
              children: publicChildren,
              internalChildren
            },
            value
          )
        );
      };
      return {
        children: publicChildren,
        linkChildren: linkChildren2
      };
    };
    const { children, linkChildren } = useChildren();
    const opened = computed(() => children.some((item) => item.state.showWrapper));
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        "scroll-fixed": isScrollFixed.value
      };
    });
    const updateOffset = () => {
      if (barRef.value) {
        const rect = useRect(barRef);
        if (props.direction === "down") {
          offset.value = rect.bottom;
        } else {
          offset.value = window.innerHeight - rect.top;
        }
      }
    };
    linkChildren({ props, offset });
    const toggleItem = (active) => {
      children.forEach((item, index2) => {
        if (index2 === active) {
          updateOffset();
          item.toggle();
        } else if (item.state.showPopup) {
          item.toggle(false, { immediate: true });
        }
      });
    };
    const getScrollTop = (el) => {
      return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
    };
    const onScroll = () => {
      const { scrollFixed } = props;
      const scrollTop = getScrollTop(window);
      isScrollFixed.value = scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
    };
    const getClasses = (showPopup) => {
      let str = "";
      const { titleClass } = props;
      if (showPopup) {
        str += "active";
      }
      if (titleClass) {
        str += ` ${titleClass}`;
      }
      return str;
    };
    onMounted(() => {
      const { scrollFixed } = props;
      if (scrollFixed) {
        window.addEventListener("scroll", onScroll);
      }
    });
    onUnmounted(() => {
      const { scrollFixed } = props;
      if (scrollFixed) {
        window.removeEventListener("scroll", onScroll);
      }
    });
    return {
      toggleItem,
      children,
      opened,
      classes,
      barRef,
      getClasses
    };
  }
});
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "cqmc-menu__title-text" };
const _hoisted_3 = { class: "cqmc-menu__title-icon" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowUp2 = resolveComponent("ArrowUp2");
  const _component_ArrowDown2 = resolveComponent("ArrowDown2");
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes)
  }, [
    createElementVNode("view", {
      class: normalizeClass(["cqmc-menu__bar", { opened: _ctx.opened }]),
      ref: "barRef"
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.children, (item, index2) => {
        return openBlock(), createElementBlock("view", {
          key: index2,
          class: normalizeClass(["cqmc-menu__item", { disabled: item.disabled, active: item.state.showPopup }]),
          onClick: ($event) => !item.disabled && _ctx.toggleItem(index2),
          style: normalizeStyle({ color: item.state.showPopup ? _ctx.activeColor : "" })
        }, [
          createElementVNode("view", {
            class: normalizeClass(["cqmc-menu__title", _ctx.getClasses(item.state.showPopup)])
          }, [
            createElementVNode("view", _hoisted_2, toDisplayString(item.renderTitle()), 1),
            createElementVNode("span", _hoisted_3, [
              renderSlot(_ctx.$slots, "icon", {}, () => [
                _ctx.direction === "up" ? (openBlock(), createBlock(_component_ArrowUp2, { key: 0 })) : (openBlock(), createBlock(_component_ArrowDown2, { key: 1 }))
              ])
            ])
          ], 2)
        ], 14, _hoisted_1);
      }), 128))
    ], 2),
    renderSlot(_ctx.$slots, "default")
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};